[Vuejs]-V-autocomplete woes in Vuetifyjs

by

0👍

✅

Do you want something like that:

<template>
  <v-app>
    <div style="padding: 20px">
      <v-autocomplete
        v-model="state"
        :items="states"
        :filter="customFilter"
        return-object
        color="white"
        item-text="name"
        label="State"
      ></v-autocomplete>
    </div>
    <div style="padding: 20px;">state selected = {{ state }}</div>
  </v-app>
</template>

<script>
export default {
  name: 'app',
  data: () => ({
    state: null,
    states: [
      { name: 'Florida', id: 1 },
      { name: 'Georgia', id: 2 },
      { name: 'Nebraska', id: 3 },
      { name: 'California', id: 4 },
      { name: 'New York', id: 5 },
    ],
  }),
  methods: {
    customFilter(item, queryText, itemText) {
      const text = item.name.toLowerCase();
      const searchText = queryText.toLowerCase();
      return text.indexOf(searchText) > -1;
    },
  },
  mounted() {
    [this.state] = this.states;
  },
};
</script>

In this example, I use v-autocomplete with prop return-object for handle this.state (variable in v-model).

If you don’t use return-object, you must do that way:

  mounted() {
    // [this.state] = this.states;
    this.state = 'Florida';
  },

Because in prop item-text was defined name

Leave a comment