如何在vue js中的选择框之间添加和删除项目？

Question

网页：

选择框：1

    <select v-model="facilitySelected" name="facilities" multiple="multiple" id="facilities" size="4" class="form-control">
      <option v-for="availability in availableFacilities" v-bind:value="availability">{{availability.label}}--</option>
    </select>

点击事件：

<a @click="removeFacilities" class="btn btn-default remove_option" rel="facilities2" id="remove"><i class="fa fa-arrow-left"></i></a>

        <a @click="addFacilities" class="btn btn-default add_option" rel="facilities2" id="add"><i class="fa fa-arrow-right"></i></a>

选择框：2

 <select name="facilities" multiple="multiple" id="facilities2" size="4" class="form-control">
      <option v-for="facility in selectedFacilities" v-bind:value="facility.value">{{facility.label}}</option>
    </select>

剧本是，

export default {
  data(){
    return{
      facilitySelected:[],
      availableFacilities: [{
        value: 1,
        label: 'Double (Non a/c)'
      },
      {
        value: 2,
        label: 'Premium Double (a/c)'
      },
      {
        value: 3,
        label: 'Standard Double (a/c)'
      }
    ],
    selectedFacilities: [],
  }
},


methods:{


  addFacilities() {
    this.selectedFacilities = this.facilitySelected.concat(this.selectedFacilities);
  },

  removeFacilities() {

  },

}

}

这里我有两个选择框，中间有单击事件，我已将变量的值分配给第一个选择框选项。我的要求是，当我选择option并first select box单击单击addFacilities事件时，该特定选项中的数据应该是moved to second select box，当我选择option并second select box单击时removeFacilities，数据需要移动到first select box。

为了添加first to second我尝试过的，

  addFacilities() {
    this.selectedFacilities = this.facilitySelected.concat(this.selectedFacilities);
  },

它将数据移动到第二个选择框，但数据仍然保留在第一个选择框中，我应该如何删除它duplication，在这里我用来concat添加数据。如果我选择该选项并单击 addFacilities，则该选项应从 中删除，first select box反之亦然removeFacilities。

小提琴链接是，https://jsfiddle.net/rym9j2ch/

Answer 1

如果您确实想在数组之间移动项目，可以这样做。我清理了一些代码，只专注于此。

网页：

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>

<div id="app">
  <select v-model="availableFacilitiesSelectedValues" multiple="multiple">
    <option v-for="facility in availableFacilities" v-bind:value="facility.value">{{facility.text}}</option>
  </select>
  <select v-model="selectedFacilitiesSelectedValues" multiple="multiple">
    <option v-for="facility in selectedFacilities" v-bind:value="facility.value">{{facility.text}}</option>
  </select>
  <br/>
  <a @click.prevent="addFacilities" href="#">add</a>
  <br/>
  <a @click.prevent="removeFacilities" href="#">remove</a>
</div>

JS：

new Vue({
  el: "#app",
  data: {
    availableFacilities: [{
      value: 1,
      text: 'Double (Non a/c)',
    }, {
      value: 2,
      text: 'Premium Double (a/c)',
    }, {
      value: 3,
      text: 'Standard Double (a/c)',
    }, ],
    selectedFacilities: [],
    availableFacilitiesSelectedValues: [], // Facility values, selected in first control
    selectedFacilitiesSelectedValues: [], // Facility values, selected in second control
  },
  methods: {
    move(value, arrFrom, arrTo) { // Helper function to transfer facility from one array to another by 'value' property
        var index = arrFrom.findIndex(function(el) {
          return el.value == value;
        });
        var item = arrFrom[index];

        arrFrom.splice(index, 1);
        arrTo.push(item);
      },
      addFacilities() {
        var selected = this.availableFacilitiesSelectedValues.slice(0);

        for (var i = 0; i < selected.length; ++i) {
          this.move(selected[i], this.availableFacilities, this.selectedFacilities);
        }
      },
      removeFacilities() {
        var selected = this.selectedFacilitiesSelectedValues.slice(0);

        for (var i = 0; i < selected.length; ++i) {
          this.move(selected[i], this.selectedFacilities, this.availableFacilities);
        }
      },
  }
})

工作小提琴示例：https://jsfiddle.net/9x0s73gk/