Vue：过滤对象数组以进行搜索答案

【问题标题】：Vue : Filter on array of object for searchVue：过滤对象数组以进行搜索
【发布时间】：2018-06-21 07:46:51
【问题描述】：

我有一个包含三个对象的数组，每个对象都有直接的键值对。

 // Search Input
 <div class="dv-header-search">
    <input type="text" class="dv-header-input"
      placeholder="Search"
      v-model="query.search_input">
  </div>

//Table row
<tr v-for="row in filteredRow">
    <td v-for="(value, key) in row">{{value}}</td>
</tr>

data() {
  return {
    model: {},
    columns: {},
    query: {
      search_input: ''
    },
  }
},

// Setting model after API call
.then(function(response) {
    Vue.set(vm.$data, 'model', response.data.model)
})

computed: {
  filteredRow: function(){
    return this.model.data.filter((row) => {
      return row;
    });
  }
}

它给了我以下异常：

TypeError: 无法读取未定义的属性“过滤器”

我在这里缺少什么。

【问题讨论】：

model definition 在哪里？
@Ohgodwhy 添加到问题代码中。
你能告诉我们model中的数据究竟是什么样的吗？
您在data 方法中将model 定义为一个空对象。所以this.model.data 将是undefined。所以在你的filteredRow 计算中，this.model.data.filter 是引发错误的原因。
正如@thanksd 所说。只需定义 model: { data: [] } 并在页面加载时不再出现该错误。承诺对象没有及时解决。或者，如果您希望模板处理它，您可以使用 v-if="model.data !== undefined"。

标签： javascript arrays object search vue.js

【解决方案1】：

您在data 方法中将model 定义为一个空对象。

即使您稍后设置model 的值，您的filteredRow 方法也会在组件呈现模板时触发，这意味着此时this.model.data 将是undefined。

最简单的解决方法是在data 方法中为model.data 赋予一个初始值：

data() {
  return {
    model: { data: [] },
    columns: {},
    query: {
      search_input: ''
    },
  }
},

【讨论】：

已修复，很棒。一个快速的@thanksd，搜索不起作用。它应该与该修复程序一起使用？
这是一个非常广泛的问题，可能值得单独发布一个帖子，其中包括您遇到的问题的minimal, complete, and verifiable example
是的，谢谢 :)