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

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的一些规则的约束,其中一个是表标签只能将某些标签作为直接子标签.