如何从vue js中的数组中删除选定的数据？

Question

我在需要拼接的从阵列中，我使用了下列数据，

HTML：

  <div id="app"> 
       <select v-model="facilityAvailable" 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> 
       <select v-model="facilitySelected" name="facilities" multiple="multiple" id="facilities2" size="4" class="form-control"> 
        <option v-for="facility in selectedFacilities" v-bind:value="facility">{{facility.label}}</option> 
       </select> 

      </div> 

脚本：

new Vue({ 
    el: "#app", 
    data: { 
    facilityAvailable: [], 
     facilitySelected:[], 
     availableFacilities: [{ 
     value: 0, 
     label: 'Double (Non a/c)' 
     }, 
     { 
     value: 1, 
     label: 'Premium Double (a/c)' 
     }, 
     { 
     value: 2, 
     label: 'Standard Double (a/c)' 
     } 
    ], 
    selectedFacilities: [], 
    }, 
    methods: { 
    removeFacilities() { 
    this.availableFacilities = this.facilitySelected.concat(this.availableFacilities); 
    this.selectedFacilities.splice(this.availableFacilities.value,1); 
    }, 
    addFacilities() { 
    this.selectedFacilities = this.facilityAvailable.concat(this.selectedFacilities); 
    this.availableFacilities.splice(this.selectedFacilities.value,1); 
    } 
    } 
}) 

我在这里做这样将一个元素从一个选择框转移到另一个选择框，为此，我使用concat添加到另一个选择框，然后使用splice删除该元素。一切都很好。但是当我splice，它拼接的顺序是0,1,2我需要根据该特定元素的索引号进行拼接。很明显，我可以按照任何顺序选择和删除元素，以便将特定元素删除并转移到第二个选择框中，而现在如果我按顺序删除它，它的工作正常，但如果我改变顺序并拼接它不起作用。另外当我选择多个元素并删除时，发生同样的事情。请帮我解决这个问题。

小提琴环节是，https://jsfiddle.net/pmvp3td6/9/

Answer 1

我不知道我的理解对你在找什么，但与尝试在addFacilities：

addFacilities() { 
    let i = 0; 
    for(i; i<this.facilityAvailable.length;i++){ 
     this.selectedFacilities.push(this.facilityAvailable[i]); 
     this.availableFacilities = this.availableFacilities.filter(facilities => facilities.value != this.facilityAvailable[i].value); 
    } 
} 

如果这是你想你可以做的删除部分类似的东西是什么

Answer 2

看一看Element-UI's Transfer component。这应该可以解决你的问题。