Question

如何使用Vue.js 2.0中的计算属性过滤数组？在较早版本的Vue中，此任务非常简单，但现在它更复杂。我在表格中显示数据：

 <tr v-for="person in filterPeople">
  <td>{{person.name}}</td>
  <td>{{person.age}}</td> 
</tr>

我有一个输入字段，我可以在其中筛选姓名和年龄。我不确定我在这里做错了什么：

computed: {

  filterPeople: function(){
    var self = this
    return this.people.filter(function(p){
      return p.name.indexOf(self.searchDetails) > - 1
   })  
  }
}

如果我输入输入，它不会按照我的预期过滤人名或年龄。演示：http://codepen.io/p-adams/pen/AXPKko

Answer 1

你的问题很简单。您正在表中使用输入标记。尝试添加包含div标签。给它app id并将input元素放入其中。这应该可以解决问题。

<div id="app">
  <input
         class="form-control"
         v-model="searchDetails"
         placeholder="filter by name or age"
         >
    <table class="table table-striped" >
      <thead>
      ...rest of code

Vue仍然受到某些HTML规则的限制，其中一个是表格标签只能将某些标签作为直接子项。

如何使用computed属性过滤数组？

1 个答案: