Console warning when using a v-if on an element inside a v-for on a template

[IonianPlayboy]

Version

3.0.0-rc.5

Reproduction link

https://jsfiddle.net/Nate_L/0y3kbmaf/13/

Steps to reproduce

1. Run the code
2. Open the console

What is expected?

The code works without any warning in the console

What is actually happening?

The code works, but a warning is logged in the console ([Vue warn]: Template compilation error: v-if branches must use compiler generated keys.)

---

Changing Vue to version vue@3.0.0-rc.4 fixes the bug.

Note that the warning happens no matter what is put inside the v-if, I tried with other reactive properties or to set it to true.
I have other v-if inside my codebase which are not inside a <template> with v-for, and all of them works without issuing a warning.

[leopiccionia]

Another problem with same root cause, now using v-if inside <transition>: #1730.

I suppose a solution for some cases is using <template v-if>, probably.

But nesting v-if inside v-for is an ubiquitous pattern. It may be one of the biggest breaking changes in Vue 3.

[IonianPlayboy]

I tried wrapping the v-if element inside a <template> and to put the v-if on the <template> and it removed the warning.
However, the added <template> makes the code look more convoluted and is less readable.

Instead of having :

<template v-for="({id, text}, index) in items">
    <span :key="'text' + id">{{text}}</span>
    <span v-if="index < numberOfItems - 1" :key="'sep' + id">, </span>
</template>

We have to write it like this :

<template v-for="({id, text}, index) in items">
    <span :key="'text' + id">{{text}}</span>
    <template v-if="index < numberOfItems - 1">
        <span :key="'sep' + id">, </span>
    </template>
</template>

I found after posting this comment : #1712 (comment), but I'm not sure if I understand why this would cause this use case not to be valid. v-for elements should not have the same key, sure, but that is not the case here.

[yyx990803]

This is expected - in v3 <template v-for> compiles into a list of fragment nodes so the key should be on the <template> instead of the elements inside.

[IonianPlayboy]

I see, thanks for the explanation ! It sure is more readable than having to wrap the v-if on the child, and it works just fine.

Can we expect to have the ESlint default config to be updated to handle this syntax, though ? (I have the "plugin:vue/base" and "plugin:vue/vue3-recommended" enabled) When I put the key on the <template v-for>, it raises the following errors :

'<template>' cannot be keyed. Place the key on real elements instead. eslint(vue/no-template-key)
Elements in iteration expect to have 'v-bind:key' directives. eslint(vue/require-v-for-key)

[haoqunjiang]

So we need to update the require-v-for-key for Vue 3 to deal with template tags and remove vue/no-template-key from plugin:vue/vue3-essential, cc @ota-meshi

[ota-meshi]

@sodatea @yyx990803
I missed this, sorry.

I have something I don't understand, so please let me know if you know.
If you check Case 2 and Case 4 below with Vue3 Template Explorer, it seems that key is not used. Do I need to consider when changing the rules? Or are vue actually using the key just not showing it in Vue3 Template Explorer?

DEMO

<div>
  <!-- Case1 -- The key is attached to _Fragment.-->
  <template v-for="item in list" :key="item.id1">
    <MyButton :foo="item">One</MyButton>
    <MyButton :foo="item">Two</MyButton>
  </template>
  <!-- Case2 -- The key is not attached to _Fragment. -->
  <template v-for="item in list" :key="item.id2">
    <MyButton :foo="item">One</MyButton>
  </template>
  <!-- Case3 -- The key is attached to div. -->
  <div v-for="item in list" :key="item.id3">
    <MyButton :foo="item">One</MyButton>
  </div>
  <!-- Case4 -- The key is not attached to _Fragment. -->
  <template v-for="item in list" :key="item.id4">
    <div>
      <MyButton :foo="item">One</MyButton>
    </div>
  </template>
</div>

[haoqunjiang]

I think that should be considered as a bug.

[haoqunjiang]

  <template v-for="item in list" :key="item.id1">
    <MyButton :foo="item">One</MyButton>
    <MyButton :foo="item">Two</MyButton>
  </template>

is compiled as the equivalent of

  <template v-for="item in list">
    <Fragment :key="item.id1">
      <MyButton :foo="item">One</MyButton>
      <MyButton :foo="item">Two</MyButton>
    </Fragment>
  </template> 

Thus the need to change the ESLint rule.

---

For a consistent template syntax, we should treat

  <template v-for="item in list" :key="item.id2">
    <MyButton :foo="item">One</MyButton>
  </template>

as the equivalent of

  <template v-for="item in list">
    <MyButton :foo="item" :key="item.id2">One</MyButton>
  </template>

, too. But that has not been implemented, so the results in the template explorer didn't meet expectations.

[ota-meshi]

It's not clear to me yet, so please let me know.
Are you say that it is Vue3's bug that key is not attached, in Case2 and Case4?

[haoqunjiang]

Yes, it's Vue 3's bug.

[ota-meshi]

I get it! Thank you!