VUEJSリストから要素を削除しますか？

Question

リストから特定の要素を削除することは可能です。私は、remove要素の

ポップ（）=削除最後の要素を、この機能を試してみました

$削除（インデックス）=リストから任意の要素

のremove（インデックス）=未定義の機能を削除しない

unshift（index）=新しい空の要素を追加する

splice（index）=インデックスからすべての要素を削除する

リストから特定の要素を削除するのを手伝ってください。以下

私のJSコード以下

var example2 = new Vue({ 
    el: '#example-2', 
    data: { 
    items: [ 
     { message: 'Foo' }, 
     { message: 'Bar' }, 
     { message: 'Bar1' }, 
     { message: 'Bar2' }, 
     { message: 'Bar3' }, 
     { message: 'Bar4' } 
    ] 
    }, 
    method : { 
    removeElement : function(index){ 
     this.items.$remove(index); 
    } 
    } 
}) 

は私のHTMLコードは

<ul id="example-1"> 
    <li v-for="(key, item) in items"> 
    {{ item.message }} 
    <button v-on:click="removeElement(key)">remove</button> 
    </li> 
</ul> 

Answer 1

$remove Vue.js 2.0で廃止され、ドキュメントに記載されているようspliceによって置き換えられます。それが機能するには、spliceという2番目のパラメータを必ず追加してください。

Migration From Vue 1.x - 2.0

methods: { 
    removeElement: function (index) { 
    this.items.splice(index, 1); 
    } 
} 

Answer 2

まず、あなたがmethodsキーを修正する必要があります。

次に、indexではなく、$removeメソッドにアイテムを渡す必要があります。 [ref]

https://jsfiddle.net/790og9w6/

Answer 3

あなたのVueのバージョンが$.remove機能が$.deleteに置き換えられました2.2.0+

Vue.delete(this.items, index); 

Answer 4

ある場合は、Vue.deleteを使用することができます。

あなたはそうのようにそれを呼び出すことができます。

this.$delete(this.someItems, itemIndex)。

ObjectとArrayで動作します。オブジェクトでは、キー付きオブジェクトを使用する必要があります。配列では、削除したい項目のインデックスを渡します。https://jsfiddle.net/james2doyle/386w72nn/

EDIT

私も

Answer 5

$ @clickにインラインで使用することができます削除するアレイの例を追加しました：

<ul id="example"> 
    <li v-for="(item, key) in items"> 
     {{ item.message }} 
     <button @click="$delete(items, key)">remove</button> 
    </li> 
</ul> 

ここ

はフィドル例です

https://vuejs.org/v2/api/#vm-delete