Vue.js从数组中总是删除最后一个项目

Question

我正在尝试创建一个简单的筛选器，当我点击“添加筛选器”按钮时，它会复制筛选器并将其添加到筛选器数组中。添加没有问题，但是我无法删除（带有叉号的）正确输入 - 我总是从数组中删除最后一项而不是正确的一项。我有以下代码：

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

问题是当我添加了三个过滤器并且想要删除第一个时，它总会删除最后一个。为什么会这样或者我做错了什么？

这里是我在jsFiddle上的问题。最好的答案也应该在jsFiddle上。

- Jaroslav Klimčík

---

因为您使用了 var index = this.extFilters.filters.indexOf(filter); ，所以总是返回列表中的第一个过滤器。请更改 indexOf() 函数。 - L. Vadim

Answer 1

正确答案是...https://jsfiddle.net/mariaczi/hed0ew5o/1/

您没有在文本输入框中添加v-model='filter.text'，这使得所有过滤器看起来都是相同的，所以它没有起作用。

现在已经正常工作了。

希望对你有所帮助。

- Marek Urbanowicz

---

也许值得更新代码片段以反映原始的 removeFilter 函数按照实现工作，缺失的绑定是唯一的问题。 - EranSch