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

What is the best way to preload all videos on my website and across different pages?

While Ajax POST is functional on desktop, it does not seem to work on Phonegap applications or Android

What causes inability for JavaScript to access a property?

Can a single value be stored in a table using a radio button?

How can I link to a different field in a mongoDB Schema without using ObjectID?

Utilizing a dynamically created Stripe checkout button

Exploring the Methods to Monitor Variables in Framework7 Store

Can JavaScript be used to create a CSRF token and PHP to check its validity?

Adding local JavaScript to a Vue component is a great way to enhance its functionality

The onChange method seems to be malfunctioning when used with radio buttons

The io.on connection event is being activated for each emit

What are the techniques for implementing an if statement in CSS or resolving it through JavaScript?

A guide to displaying a PDF preview using React Dropzone

Securing your Laravel and Vue source code: Best practices

I am looking to utilize the JavaScript YouTube API to seamlessly upload a video from my website directly to YouTube

Is there a way to verify the phone number input field on my registration form along with the country code using geolocation

Having trouble getting useFieldArray to work with Material UI Select component

Vue failing to update when a computed prop changes

Proceed with another ajax request only when the previous one has been successfully completed and loaded

Discover distinct and recurring elements