web-dev-qa-db-ja.com

Vue.jsの配列から項目を削除する方法

私はvue.js（2）の初心者で、現在はシンプルなイベントアプリに取り組んでいます。イベントを追加できましたが、今度はボタンをクリックしてイベントを削除します。

HTML

    <div class="list-group">

        <div class="list-group-item" v-for="event in events">
            <h4 class="list-group-item-heading">
                {{ event.name }}
            </h4>

            <h5>
                {{ event.date }}
            </h5>

            <p class="list-group-item-text" v-if="event.description">{{ event.description }}</p>

            <button class="btn btn-xs btn-danger" @click="deleteEvent(event)">Delete</button>
        </div>

    </div>
</div>

JS（ヴュー）

new Vue ({
    el: '#app',

    data: {
        events: [
            {
                id: 1,
                name: 'Event 1',
                description: 'Just some lorem ipsum',
                date: '2015-09-10'
            },
            {
                id: 2,
                name: 'Event 2',
                description: 'Just another lorem ipsum',
                date: '2015-10-02'
            }
        ],

        event: { name: '', description: '', date: '' }
    },

    ready: function() {

    },

    methods: {

        deleteEvent: function(event) {
                this.events.splice(this.event);
        },

        // Adds an event to the existing events array
        addEvent: function() {
            if(this.event.name) {
                this.events.Push(this.event);
                this.event = { name: '', description: '', date: '' };
            }
        }

    } // end of methods

});

私はイベントを関数に渡し、スライス関数でそのイベントを削除するよりも、配列からデータを削除するためのコードだと思いました。単純なボタンとonclickイベントを使用して配列からデータを削除するための最もクリーンで最もきれいな方法は何ですか？

javascriptvuejs2
57
Gijsberts

あなたは間違った方法でspliceを使っています。

過負荷は以下のとおりです。

array.splice（開始）

array.splice（start、deleteCount）

array.splice（start、deleteCount、itemForInsertAfterDeletion1、itemForInsertAfterDeletion2、...）

開始は、削除したい要素ではなく、開始したい索引を意味します。そして、2番目のパラメータdeleteCountを1として渡す必要があります。つまり、「インデックス{start}から始まる1つの要素を削除したい」ということです。

だからあなたはもっとうまく行く：

deleteEvent: function(event) {
  this.events.splice(this.events.indexOf(event), 1);
}

また、パラメータを使用しているので、this.eventではなく直接アクセスします。

しかしこのようにして、削除ごとに不要なindexOfを検索します。これを解決するには、v-forでindex変数を定義してから、イベントオブジェクトの代わりにそれを渡します。

あれは：

v-for="(event, index) in events"
...

<button ... @click="deleteEvent(index)"

そして：

deleteEvent: function(index) {
  this.events.splice(index, 1);
}
92
Edmundo Rodrigues

あなたも使うことができます。

remove (index) {
 this.$delete(this.finds, index)
}

出典：

24
Katinka Hesselink

キー属性をバインドすることを忘れないでください。そうしないと常に最後のアイテムが削除されます

配列から選択した項目を削除する正しい方法：

テンプレート

<div v-for="(item, index) in items" :key="item.id">
  <input v-model="item.value">
   <button @click="deleteItem(index)">
  delete
</button>

スクリプト

deleteItem(index) {
  this.items.splice(index, 1); \\OR   this.$delete(this.items,index)
 \\both will do the same
}
7
Afraz Ahmad

あなたが入力でそれをしているとき、それは束縛されるべきであるのでそれはさらにおかしなことです。挿入と削除のオプションでVue2でそれを行う方法に興味があるなら、例を見てください：

どうぞご覧ください js fiddle

new Vue({
  el: '#app',
  data: {
    finds: [] 
  },
  methods: {
    addFind: function () {
      this.finds.Push({ value: 'def' });
    },
    deleteFind: function (index) {
      console.log(index);
      console.log(this.finds);
      this.finds.splice(index, 1);
    }
  }
});
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <h1>Finds</h1>
  <div v-for="(find, index) in finds">
    <input v-model="find.value">
    <button @click="deleteFind(index)">
      delete
    </button>
  </div>
  
  <button @click="addFind">
    New Find
  </button>
  
  <pre>{{ $data }}</pre>
</div>
6
Yevgeniy Afanasyev

あなたはIDを介してアイテムを削除することができます

<button @click="deleteEvent(event.id)">Delete</button>

あなたのJSコードの中

deleteEvent(id){
  this.events = this.events.filter((e)=>e.id !== id )
}

Vueは観測された配列の突然変異方法をラップしているため、ビューの更新もトリガーされます。 ここをクリック 詳細については==。

あなたはこれがVueが既存のDOMを捨ててリスト全体を再レンダリングする原因になると思うかもしれません - 幸運なことに、そうではありません。

0
Masum Billah