Javascript Vue.js始终从阵列中删除最后一项

我试图有一个简单的过滤器，当我点击按钮“添加过滤器”，我将复制过滤器，它将添加到过滤器阵列。添加并没有问题，但我不能删除（交叉图标）正确的输入-我总是从数组中删除最后一项，而不是正确的一项。我有以下代码：

<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>

问题是，当我添加例如三个过滤器时，我想删除第一个过滤器，然后它将始终删除最后一个过滤器。为什么会这样，或者我做错了什么

这是我的问题。最好的答案也是在JSFIDLE中。

正确的答案是

您没有将

v-model='filter.text'

添加到文本输入中，这使得您的所有过滤器看起来都一样，这就是它无法工作的原因

现在工作正常了

---

希望有帮助。

因为您使用的var index=this.extFilters.filters.indexOf（filter），始终从列表中返回第一个筛选器。更改indexOf（）函数可能值得更新fiddle，以反映原始的

removeFilter

函数按实现方式工作，缺少的绑定是唯一的问题。

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')