Javascript 如何使用计算属性筛选数组？

如何使用

Vue.js 2.0

中的计算属性筛选数组？在较旧版本的

Vue

中，此任务非常简单，但现在它更复杂。我正在表格中显示数据：

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

---

如果我输入，它不会像我预期的那样按姓名或年龄过滤这些人。演示：

您的问题非常简单。您正在表内使用输入标记。尝试添加包含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的某些规则约束，其中一个规则是表标记只能有某些标记作为直接子项。

请您的问题在问题正文中直接显示相关代码。编辑了我的问题AHH是。不知道我怎么会错过。谢谢。事实上，当你从Vue的角度思考问题时，这是很容易做到的。因为通常情况下，模板会更灵活。我想知道为什么我不能按年龄过滤。似乎只适用于名字。内置的过滤器让事情变得容易多了。

p.name.indexOf（self.searchDetails）>-1

只通过

p.name

进行过滤。如果

searchDetails

是文本，则可能需要编写两个筛选函数，如果是数字，则使用一个。可能是因为通过

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