javascript - 如何在两个属性上使用 Vue/Vuetify 自动完成过滤器？

Question

背景

所以我有一个 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>

如果您需要更多详细信息，请告诉我，在此先感谢您。

Answer 1

这里的游戏晚了，但解决方案是绑定(bind)自定义过滤器

<v-autocomplete
  :filter="filterObject"
>

然后定义行为

  methods: {
    filterObject(item, queryText, itemText) {
      return (
        item.prop1.toLocaleLowerCase().indexOf(queryText.toLocaleLowerCase()) >
          -1 ||
        item.prop2.toLocaleLowerCase().indexOf(queryText.toLocaleLowerCase()) > -1
      );
    }
  }

v-autocomplete filter prop documentation提供指向 default ts implementation 的链接.