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

1つの選択ボックスから他の選択ボックスへの1つの要素の転送。これは、concatを別のものに追加するために使用し、spliceを削除しました。しかし、私がspliceの場合、それは0,1,2の順番でスプライシングされています。その特定の要素のインデックス番号に基づいてスプライスする必要があります。クリアでは、私は選択し、その特定の要素を削除する必要があり、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を見てください。これはあなたの問題を解決するはずです。