Challenges with v-autocomplete in Vuetify.js

Question

Challenges with v-autocomplete in Vuetify.js

I am currently working with the v-autocomplete component and finding it somewhat rigid in terms of customization. I am hoping someone can provide some insight on this issue.

Is there a way to have a default display text value in the input when the page first loads for v-autocomplete? For example:

If I have a value in my items[] array, or any other data() value, is it possible to have one of those items show by default (as display text) when the page loads? Can this be achieved within the mounted() lifecycle hook? I have attempted to bind a value to the v-model but it only sets the value itself, leaving the display text empty.

You can find more information at: vuetifyjs.com/ru/components/autocompletes#asynchronous-items

In the example mentioned above, the states[] array contains multiple values. Is there a way to set one of them as the default selection upon mount/render?

As someone transitioning from React, please excuse my lack of experience! I am still in the process of getting acquainted with Vue and Vuetify.

Any assistance would be greatly appreciated. Thank you!

javascript vue.js vuetify.js

Answer 1

Answer №1

Looking for something similar to this:

<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 particular scenario, the v-autocomplete component is used with the prop return-object to manage the this.state variable in the v-model.

If you opt not to use return-object, the approach would be as follows:

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

This adjustment is necessary because the item-text prop specifies name.

Answer 2

Looking for something similar to this:

<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 particular scenario, the v-autocomplete component is used with the prop return-object to manage the this.state variable in the v-model.

If you opt not to use return-object, the approach would be as follows:

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

This adjustment is necessary because the item-text prop specifies name.

Challenges with v-autocomplete in Vuetify.js

Answer №1

Similar questions

Is this jQuery script not functioning properly?

Is it possible to incorporate async await with SetState in React?

Secure verification is a critical element within the core component of React JS

Click the button to increase the counter up to 2, and then decrease it back to 0 starting from 2

Dealing with various menu states using Material-UI Menu component: Tips and Tricks

Displaying a message when there are no results in Vue.js using transition-group and encountering the error message "children must be keyed

What is the process for obtaining Style.css, additional CSS, and JavaScript files from a live single page website?

Looking for a Plugin that Can Responsively Display Images in a Vertical Layout - Does One Exist using Jquery

Inject props into a Component nested within a Higher-Order-Component (HOC)

Struggling with TypeScript declaration files has been a challenge for me

Is it achievable to delete certain content post window launch in Nuxt.js?

In what way does ReactJS enable me to utilize constant functions before they are declared?

Image Animation Using a Rotational Control (HTML/JavaScript/...)

What is the best way to ensure all asynchronous tasks are completed in Node.js before proceeding?

Navigating through Node and Express on Azure App Service

Step-by-step guide to accessing the detail view upon selecting a table row in react.js

Verify the position of the scrollbar without triggering any reflow

Tips for utilizing identical properties across numerous styled elements:

The React task list updates the todo items on change, rather than on submission

Iterating through and dispatching to the modal窶ｦ