如何使用计算属性过滤数组？

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标签。给它的应用程序ID，并把输入元素。这应该解决这个问题。

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