vue中如何搜索json数据？

Question

我有一个 json 文件，我渲染到 table ，我有 11 列，如 id ， name 等，我想按每一列搜索，但它只适用于一列，当我开始过滤数据时时间例如我按 id 排序，然后我想按名称排序，它崩溃了。

我有用于从 json 渲染数据的 v-for 结构

<div class="document__json" v-for="(item,index) in filteredJson" :key="index" >
  <div class="document__data" :title=item.priority>{{item.priority}}</div>
  <div class="document__data" :title=item.refid_number>{{item.refid_number}}</div>
</div>

我尝试使用 v-model 搜索 json，我发送到数组的每个字母/单词

data() {
  return {
    myJson: json,
    search: []
  };
},

filteredJson: function() {
  let new_json;
  return this.myJson.filter((x) => {
    new_json = x;
    console.log(x);
    for (let i in this.search) {
      console.log(new_json[i])
      console.log(this.search)
      new_json = new_json[i].toLowerCase().match(this.search[i].toLowerCase());
    }
    return new_json
  });
}

<input type="text" v-model="search['priority']" class="document_search">
<input type="text" v-model="search['refid_number']" class="document_search">

我尝试通过与搜索数组中的数据进行比较来过滤 json，但是如果我将按优先级进行搜索，则只有当我也尝试按 refid_number 进行搜索时，它才会用错误填充粉碎： Cannot read property 'refid_number' of null"

Answer 1

在您的过滤器函数中，首先设置new_json = x（它是一个对象），然后在for循环中您将new_json设置为match结果，这将是一个数组，它不会将成员作为原始对象 (x)，因此它会在下一个循环中崩溃。

我猜你需要的是这样的：

return this.myJson.filter((x) => {
    let match = true;
    console.log(x);
    for(let i in this.search){
        console.log(x[i])
        console.log(this.search)
        if(!x[i].toLowerCase().match(this.search[i].toLowerCase())) match = false;
    }
    return match;
});