我有一个通过API调用动态更新的数组,该数组用于多个选择元素。数组更新时,它将擦除所有以前的选择值。如何保留选定的值并仍然维护一个动态更新的数组?
<div id="app">
What are you interested in?
<select v-model="inputa">
<option v-for="options in todos" v-bind:value="options ">
{{ options.text }}
</option>
</select>
<br><br><br><br>
Your details:
<select v-model="inputb">
<option v-for="options in todos" v-bind:value="options ">
{{ options.text }}
</option>
</select>
<br><br><br><br>
<button v-on:click="switchList()">
Update Shared Array via API
</button>
</div>
new Vue({
el: "#app",
data: {
todos: [
{ text: "Learn JavaScript", done: false },
{ text: "Learn Vue", done: false },
{ text: "Play around in JSFiddle", done: true },
{ text: "Build something awesome", done: true }
],
randomArray: [
{ text: "Age", done: false },
{ text: "DOB", done: false },
{ text: "Contact", done: true },
{ text: "Mobile", done: true }
],
inputa: '',
inputb: '',
},
methods: {
switchList()
{
this.todos = [];
this.todos = this.randomArray;
}
}
})
在上面的示例中,我正在使用按钮模拟API调用。随机数组是一个项目列表,再次用于演示。
我正在尝试做的事情: