Question

我有一个渲染到表的json文件，我有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;
});

如何在vue中搜索json数据？

1 个答案: