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

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