Обеспечение соответствия динамически создаваемых раскрывающихся списков значению в модели Vue из исходного раскрывающегося списка
У меня есть раскрывающийся список, который заполняется из массива в моей модели Vue, например:
<!-- First dropdown -->
<select v-model = "building">
<option v-for = "building in buildings" v-bind:value = "building.id">
{{ building.name }}
</option>
</select>
<!-- Entries Input -->
<input v-model = "entries" type = "number">
После того, как пользователь выберет этот раскрывающийся список и нажмет кнопку, будет создано множество других раскрывающихся списков (количество зависит от числа, которое пользователь ввел в другом поле ввода):
<!-- Dynamically created dropdowns -->
<div v-for = "entry in entries">
<select>
<option v-for = "building in buildings" :selected = "building.id == building">
{{ building.name }}
</option>
</select>
</div>
Мне нужно, чтобы динамически создаваемые раскрывающиеся списки имели тот же выбор, что и первый раскрывающийся список. Я не могу связать их через v-model, потому что мне нужно, чтобы каждый из них мог быть изменен, не затрагивая другие.
есть идеи как это сделать? Я думал, что мой код :selected = "building.id == building" будет работать, но, похоже, это не так.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Попробуйте привязать свой второй раскрывающийся список к вычисляемому свойству на основе первого следующим образом:
computed:{
cpt_building:{
get(){
return this.building;
},
set(value){
//use your value whatever you want
}
}
шаблон :
<div v-for = "entry in entries">
<select v-model = "cpt_building">
<option v-for = "build in buildings" :selected = "build.id == building">
{{ building.name }}
</option>
</select>
</div>
или вы можете создать другое свойство данных и изменить его, просмотрев первое.
data(){
return{
building:0,
building2:0,
...
}
},
watch:{
building(val){
this.building2=val;
}
}
шаблон :
<div v-for = "entry in entries">
<select v-model = "building2">
<option v-for = "build in buildings" :selected = "build.id == building">
{{ building.name }}
</option>
</select>
</div>
Это полезное начало. Однако не будут ли все выпадающие списки привязаны к cpt_building, поэтому, если один из них изменится, все они изменятся?
второй выбор зависит от первого, а первый нет
Это правильный ответ, я просто пытаюсь понять, почему это работает. Тогда я почитаю о вычисляемых свойствах. Спасибо.
Вы используете
buildingдля элемента данных, а также для псевдонима v-for.