I'm encountering an issue with my JSON file that I am rendering to a table. I have 11 columns including id, name, and more. I want to search by every column, but the functionality only works for one column. If I try to filter the data multiple times, such as sorting by id and then by name, it crashes.
I am using a v-for structure to render data from the JSON file.
<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>
I attempted to search through the JSON using v-model, where every letter/word is sent to an array.
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">
When attempting to filter the JSON by comparing with data inside the search array, it only works if I search by priority. If I try to also search by refid_number, it crashes with the error: "Cannot read property 'refid_number' of null".