テーブルにレンダリングするjsonファイルがあります。ID、名前などの11の列があります。すべての列で検索したいのですが、1つの列で機能し、たとえばデータのフィルタリングをもう一度開始すると、 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"
フィルタ関数内で、最初にnew_json = x（オブジェクトである）を設定new_jsonしますが、次にforループ内で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;
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加