How to have Vue/Vuetify Autocomplete filter on two properties?

Take away:

item-text="fpartno"

and use:

no-filter="true"

So I realized I was using the wrong tool for the job. While reading the docs I must have missed the section regarding the Combobox which has everything I need.

Anyways, changing v-autocomplete to v-combobox removing item-text="fpartno" and adding a custom filter gave my component the functionality I needed.

Here it is working correctly:

Fixed pic 1

Below is my updated code:

<template>
    <v-container fluid grid-list-xl>
        <v-layout wrap align-center>
            <v-flex xs12 sm6 d-flex>
                <v-combobox :items="inmastxs"
                                label="Part #"
                                item-value="identity_column"
                                :filter="PartRevDescFilter"
                                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-combobox>
            </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 = "";
            }
            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;
                })
                .catch(function (error) {
                    console.log(error);
                }).then(() => {
                    this.loading = false;
                });
        }

        private PartRevDescFilter(item: inmastx, queryText, itemText) {         
            return (item.fpartno.toLowerCase().includes(queryText.toLowerCase()) || item.frev.toLowerCase().includes(queryText.toLowerCase()) || item.fcomment.toLowerCase().includes(queryText.toLowerCase()));
        }
    }
</script>

Because the title of the question mentions Autocomplete not combobox I don't think that this answer is enough to be considered the best answer. Unless Autocomplete was the wrong tool all along.


Late to the game here but the solution is to bind a custom filter

<v-autocomplete
  :filter="filterObject"
>

and then define the behavior

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

The v-autocomplete filter prop documentation provides a link to the default ts implementation.