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

Posted 2023-02-22

【中文标题】Vue：过滤对象数组以进行搜索

【英文标题】：Vue : Filter on array of object for search

【发布时间】：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"。

【参考方案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

是的，谢谢 :)