如何使用計算屬性過濾數組？

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標籤只能將某些標籤作爲直接子標籤。