javascript - 如何在两个属性上使用 Vue/Vuetify 自动完成过滤器?
问题描述
背景
所以我有一个 vuetify 自动完成输入,用于搜索零件表。零件表有一个标识栏、零件号栏、修订栏、描述栏和其他一些信息栏。
我让它工作,所以自动完成选项显示部件号、版本和描述,同时在文本字段中输入按部件号过滤部件。
问题
但我的目标是能够过滤部件号和描述。
我尝试修改item-text="fpartno"但无法弄清楚如何让它与两个或多个属性一起使用。而且我在网上找到的大多数解决方案只影响选项的显示方式,而不影响它们的过滤方式。
删除item-text也不起作用。
代码
我将自动完成功能放入单页组件中。我目前正在使用 Typescript,但我也会接受使用 javascript 的答案。如果我可以使用理想的模板语法。
注意:属性fcomment包含描述,以防任何人感到困惑。
<template>
<v-container fluid grid-list-xl>
<v-layout wrap align-center>
<v-flex xs12 sm6 d-flex>
<v-autocomplete :items="inmastxs"
label="Part #"
item-value="identity_column"
item-text="fpartno"
cache-items
:search-input.sync="search"
solo>
<template slot="selection" slot-scope="data">
{{ data.item.fpartno }} - {{ data.item.frev }} ({{ data.item.fcomment }})
</template>
<template slot="item" slot-scope="data">
{{ data.item.fpartno }} - {{ data.item.frev }} ({{ data.item.fcomment }})
</template>
</v-autocomplete>
</v-flex>
</v-layout>
</v-container>
</template>
<script lang="ts">
import Vue from 'vue'
import { Component, Prop, Watch } from 'vue-property-decorator';
import { inmastx } from '../../models/M2M/inmastx';
import axios from 'axios';
@Component({})
export default class InMastxSearch extends Vue {
private search: string = "";
private PartNumber: string = "";
private loading: boolean = false;
private inmastxs: inmastx[] = [];
@Watch('search')
onPropertyChanged(value: string, oldValue: string) {
this.fetchParts(value);
}
private mounted() {
this.fetchParts("");
}
private fetchParts(value: string) {
if (value == null) {
value = "";
}
console.log(value);
this.loading = true
axios.get("../odata/inmastx?$orderby=fpartno,frev&$top=10&$filter=contains(fpartno,'" + value + "') or contains(fcomment,'" + value + "')")
.then((response) => {
this.inmastxs = response.data.value;
console.log(this.inmastxs);
})
.catch(function (error) {
console.log(error);
}).then(() => {
this.loading = false;
});
}
}
</script>
如果您需要更多详细信息,请告诉我,并提前致谢。
解决方案
游戏迟到了,但解决方案是绑定自定义过滤器
<v-autocomplete
:filter="filterObject"
>
然后定义行为
methods: {
filterObject(item, queryText, itemText) {
return (
item.prop1.toLocaleLowerCase().indexOf(queryText.toLocaleLowerCase()) >
-1 ||
item.prop2.toLocaleLowerCase().indexOf(queryText.toLocaleLowerCase()) > -1
);
}
}
推荐阅读
- node.js - 我不明白 node js 中以下代码中的应用
- php - Laravel 变量缓存
- c# - 我想将全局变量分配给局部变量,但出现错误。;预期的
- python - 测试python中的字符串输入是否包含正确格式的正确字符
- html - 带有嵌套 ul 的水平 ul 的布局问题
- botframework - Bot Framework Emulator - 如何强制模拟器使用特定端口
- javascript - addEventListener() 和 createElement()
- javascript - 添加路线,google未定义
- c - 我可以将 size_t 类型的 sizeof 的屈服值存储在 unsigned int 对象中吗?
- java - 空指针异常(在Struts2上实现会话)