$attrs not updating when change attrs via template v-if

[0x009922]

Version

3.0.0-rc.4

Reproduction link

https://codepen.io/liquid-solid/pen/ZEQZLWp

Steps to reproduce

Custom input components renders via v-for and their state depends on which values in list, true or false. There are different placeholders for false and true state. Click 'Add true to start' button to add true value to start of items array and you can see that value in start of array is true, but placeholder still in false state.

What is expected?

I expected for my-input component to update his placeholder to 'truthy' when value becomes true.

What is actually happening?

Actually my-input component saves his 'falthy' placeholder when value becomes true.

---

Expected behavior is needed for saving components state using only key. For example, true value may be added not on button click, but on input on falthy my-input , and i want to save focus on this element, but not remounting this component and all its internals, i want simply change his state. I am used to tricks like this in Vue 2.

P. S. Sorry for my english )

[yyx990803]

The root cause is because you are giving both branches of the v-if the same key, so when being patched both branches are considered the same component, and placeholder is a static prop so it's not patched at all.

This has to do with how v-if and v-else now behaves differently in v3 where different branches must always have different keys. We should probably issue warnings for the case where user is forcing the same key on different branches.

But in your specific case:

1. The key is unnecessary in the first place since using the index as key is the same as having no keys.
2. If you really need a key, it should be placed on the <template> instead of the inner content.

[edikdeisling]

@yyx990803 hello, could you explain please how i need to use v-if-else inside v-for?

// eslint error: vue/require-v-for-key
<template v-for="item of items">
  <div v-if="item"><div>
  <span v-else></span>
</template>

// eslint error: vue/no-template-key
<template v-for="item of items" :key="item">
  <div v-if="item"><div>
  <span v-else></span>
</template>

// compile error: v-if branches must use compiler generated keys
<template v-for="item of items">
  <div v-if="item" :key="item"><div>
  <span v-else :key="item"></span>
</template>

So the only option now is create wrap dom node(i.e. div) for this cases?

Another case without "v-else"

<template v-for="item of items">
  <div v-if="item"><div>
  <span></span>
</template>

[cliqer]

I'm using pug with latest vite and vue rc5.
The error appears on child v-if even when v-for is not used.

edit: Nevermind, on my case I had a 3rd v-if that also had a :key.
Removed the key and the error is gone.