javascript - 如何将选定的值呈现到多下拉框中

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;
      })
    }
  }
})

这是一支笔。

标签： javascriptvue.js

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>