单个数组,更新多个选择选项-如何保存选择的值?

时间:2018-08-13 21:05:51

标签: select vue.js options v-for

我有一个通过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调用。随机数组是一个项目列表,再次用于演示。

我正在尝试做的事情:

  1. 用户在选择选项列表中选择一个值。
  2. API调用使用新值更新数组。
  3. 新值将更新第二个选项列表,并保留第一个选项。

JsFiddle:https://jsfiddle.net/syed263/vrojh38w/27/

0 个答案:

没有答案