如何将选定的值渲染到多重下拉框中

Question

我有一个多重选择框，我希望能够基于来自数组的值在多重框中选择值。我正在使用vuejs。有任何想法吗？我试图解决该问题的方法显然是非常错误的。任何帮助将不胜感激。

<div id="app">

<select class="multiselect"  v-model="mySelect" multiple  class="multi-size">
      <option>Access</option>
      <option>BA Briefings</option>
      <option>Change Management</option>
      <option>Clearance</option>
      <option>Communications</option>
      <option>CONUS</option>
      <option>Delay</option>
      <option>Disruption</option>
      <option>eQIP</option>
    <option>Field Ops</option>                                                                                                               
  </select>  


  <button @click="add">Add selection</button>
</div>


new Vue({
  el: "#app",
  data() {
    return {
     mySelect:'',
     selData: ["Access", "BA Briefings", "CONUS", "Delay"]
    }      
  },
  methods: {
    add: function(){
      this.selData.forEach(data=>{
        this.mySelect = data;
      })
    }
  }
})

这里是pen。

Answer 1

您只需要进行两项更改，因为它是多选的，所以将mySelect作为数组。其次，根据需要在数组中同时选择多个项目，将元素添加到数组中。更新了您的代码，希望对您有所帮助。

new Vue({
  el: "#app",
  data() {
    return {
     mySelect:[],
     selData: ["Access", "BA Briefings", "CONUS", "Delay"]
    }      
  },
  methods: {
    add: function(){
      this.selData.forEach(data=>{
        this.mySelect.push(data);
      })
    }
  }
})

<div id="app">
<select class="multiselect"  v-model="mySelect" multiple  class="multi-size">
      <option>Access</option>
      <option>BA Briefings</option>
      <option>Change Management</option>
      <option>Clearance</option>
      <option>Communications</option>
      <option>CONUS</option>
      <option>Delay</option>
      <option>Disruption</option>
      <option>eQIP</option>
    <option>Field Ops</option>
  </select>  
  <button @click="add">Add selection</button>
</div>