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

How to filter array using computed property?

本文关键字：筛选 数组 属性 计算 何使用      更新时间：2023-09-26

如何使用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

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

相关文章：