Когда вы добавляете новый вариант в элемент select во Vue.js, значение по умолчанию для выбранного варианта может сбиваться. Это происходит из-за того, что Vue.js обновляет DOM-элементы на основе своего состояния, а не на основе атрибутов HTML. Существует несколько способов решить эту проблему.
1. Vue.js предлагает директиву v-model, которая обеспечивает двустороннюю привязку данных между свойством модели и элементом input. Чтобы сохранить выбранное значение варианта при добавлении нового варианта, вам нужно создать свойство модели и привязать его с помощью директивы v-model. Таким образом, при добавлении нового варианта, значение по умолчанию не будет сбито:
<template>
<div>
<select v-model="selectedValue">
<option v-for="option in options" :value="option.value">{{ option.label }}</option>
</select>
<button @click="addOption">Add Option</button>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
],
selectedValue: 'option1',
};
},
methods: {
addOption() {
this.options.push({ value: 'option3', label: 'Option 3' });
},
},
};
</script>
2. Другой способ решить эту проблему - использовать атрибут selected вместо v-model. В этом случае вы должны будете вручную обновлять состояние свойства модели, когда будет добавляться новый вариант:
<template>
<div>
<select>
<option v-for="option in options" :value="option.value" :selected="selectedValue === option.value">{{ option.label }}</option>
</select>
<button @click="addOption">Add Option</button>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
],
selectedValue: 'option1',
};
},
methods: {
addOption() {
this.options.push({ value: 'option3', label: 'Option 3' });
this.selectedValue = 'option3';
},
},
};
</script>
Оба эти способа позволят вам сохранить выбранное значение варианта при добавлении нового варианта в элемент select во Vue.js. Вы можете выбрать способ, который лучше соответствует вашим потребностям и предпочтениям.