gpt4 book ai didi

vue.js - 如何使多个搜索过滤器与 Vue Bootstrap 中的 for 循环一起使用?

转载 作者:行者123 更新时间:2023-12-02 18:34:15 25 4
gpt4 key购买 nike

我有一个表,每列中都有一些过滤器,但是当我输入任何内容时,所有项目都会消失。控制台不返回任何错误。

代码如下:

<template>
<div>
<b-table
id="the-table"
:per-page="perPage"
:current-page="currentPage"
:items="filteredItems"
:fields="fields"
>
<template slot="top-row" slot-scope="{ fields }">
<td v-for="field in fields" :key="field.key">
<input v-model="filters[field.key]" :placeholder="field.label" />
</td>
</template>
</b-table>
<b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage" aria-controls="the-table"></b-pagination>
</div>
</template>
<script>
import axios from "axios";

export default {
data() {
return {
filters: {
option: "",
style: "",
stock: "",
},
items: [],
fields: [
{ key: "options", label: "Options", sortable: true },
{ key: "style", label: "Style", sortable: true },
{ key: "stock", label: "Stock", sortable: true },
{ key: "type", label: "Type", sortable: true },
{ key: "class", label: "Class.", sortable: true },
],
perPage: 15,
currentPage: 1,
};
},
created() {
this.getTable();
},
methods: {
getTable() {
axios
.get("./data/options.json")
.then((res) => (this.items = res.data))
.catch((error) => console.log(error));
},
},
computed: {
rows() {
return this.items.length;
},
filteredItems() {
return this.items.filter((d) => {
return Object.keys(this.filters).every((f) => {
return this.filters[f].length < 1 || this.filters[f].includes(d[f]);
});
});
},
},
};
</script>

我正在尝试过滤这样的对象数组:

[{"option": "ABEVH160", "style": "American", "stock": "ABEV3", "type": "CALL", "class": "ITM"},
{"option": "BBAS230", "style": "European", "stock": "BBAS3", "type": "PUT", "class": "ATM"},
{"option": "BBDC180", "style": "American", "stock": "BBDC4", "type": "CALL", "class": "OTM"}]

我的目标是能够单独过滤每一列: data-table

有人知道我错过了什么吗?

最佳答案

问题在于条件:

return this.filters[f].length < 1 || this.filters[f].includes(d[f]);

d[f] 是完整值,this.filters[f] 是搜索字符串。显然这不起作用,因为它检查子字符串中是否包含完整的单词。只需反转条件即可:

return this.filters[f].length < 1 || d[f].includes(this.filters[f]);

您可以看到它正在运行 here .

关于vue.js - 如何使多个搜索过滤器与 Vue Bootstrap 中的 for 循环一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69012635/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com