Vue.jsは常に配列の最後の項目を削除します

Question

私は単純なフィルタを使用しています。「add filter」ボタンをクリックすると、フィルタが複製され、フィルタ付きの配列に追加されます。追加するのに問題はありませんが、正しい入力を取り除くことはできません（私は十字アイコン） - 私はいつも正しい項目の代わりに配列から最後の項目を削除します。私はこのコードを持っている：

<div class="container"> 

    <div class="jumbotron"> 
    <div> 
     <div class="form-group"> 
     <input type="text" class="form-control input-sm" id="pref-search"> 
     </div> 
     <div class="form-group"> 
     <button type="button" class="btn btn-default filter-col btn-sm" v-on:click="addFilter"> 
      <i class="fa fa-plus-circle" aria-hidden="true"></i> Add filter 
     </button> 
     </div> 
    </div> 

    <div v-for="filter in extFilters.filters" style="margin: 10px 0"> 
     <div class="form-group"> 
     <input type="text" class="form-control input-sm" id="pref-search"> 
     </div> 
     <div class="form-group"> 
     <button type="button" class="btn btn-default filter-col btn-sm" v-on:click="addFilter"> 
      <i class="fa fa-plus-circle" aria-hidden="true"></i> Add filter 
     </button> 
     <span v-on:click="removeFilter(filter)"><i class="fa fa-times" aria-hidden="true"></i></span> 
     </div> 
    </div> 
    </div> 
</div> 

そして、ここではVue.jsです：

var data = { 
    'filters': [], 
} 

// app Vue instance 
var app = new Vue({ 
    // app initial state 
    data: { 
    extFilters: data, 
    }, 

    // methods that implement data logic. 
    methods: { 
    addFilter: function() { 
     this.extFilters.filters.push({ 
     andor: 'a', 
     search_in: '', 
     operator: '', 
     text: '' 
     }) 
    }, 

    removeFilter: function(filter) { 
     var index = this.extFilters.filters.indexOf(filter); 
     this.extFilters.filters.splice(index, 1); 
    }, 
    }, 
}) 

// mount 
app.$mount('.jumbotron') 

問題は、私は、たとえば3つのフィルタを追加し、私は最初のフィルタを削除したいとき、それは常に最後に削除されますです1。なぜそれが起こっているのか、私が間違っているのか？

ここに私の問題はjsFiddleです。最良の答えはjsFiddleでもあります。

Answer 1

正解はあなたはそれが働いていなかった理由です、同じことを探して、すべてのフィルタを作るテキスト入力にv-model='filter.text'を追加しませんでした... https://jsfiddle.net/mariaczi/hed0ew5o/1/

です。

今すぐ正しく動作します。

希望します。