Select with dynamic options doesn't keep the correct selected option when shift / unshifting options

[antman3351]

Hi,

If a select with v-model has "dynamic" options e.g. <option v-for="item in items" :value="item">{{item}}</option> and the option before the selected option is added or removed, the select will show the wrong selected option.

I'm guessing the selectedIndex isn't updated when the options are changed.

The only workaround I found was re-setting the value after updating the options, is there a more elegant solution? .

// Update options.... then
const originalValue = this.selectedItem;
this.selectedItem = null;
this.selectedItem = originalValue;

Here's a simplified example, try removing an item ( shift ) and see the select has the wrong selected option
https://jsfiddle.net/antman3351/L1redxpy/16/

[604587986]

add key

[antman3351]

Thanks for the pointer ( a few extra words would have reduced my googling... 😅)

https://vuejs.org/api/built-in-special-attributes.html#key

So the key has to be set like this:

<select v-model="selectedItem">
    <option v-for="item in items" :value="item" :key="item">{{item}}</option>
</select>

[antman3351]

Just a quick side note:
The option must NOT be wrapped in a <template></template>.

❌ This is wrong:

<select v-model="selectedItem">
   <template v-for="item in items">
       <option :value="item" :key="item">{{item}}</option>
   </template>
</select>