How can I use v-autocomplete in Vuetify 3 with a v-model object example?

Using v-autocomplete in Vuetify 3 with a v-model object requires careful setup to ensure data binding works correctly. Here’s a detailed guide with an example:

Understanding the Challenge:

The v-autocomplete component in Vuetify 3 expects a primitive type (usually a string or number) for the v-model when used for basic selection. However, if you need to bind the selection to a complete object (e.g., an object containing id and name properties), you'll have to use the item-value and item-title props to manage how the component extracts values for selection and display.

Steps to Use v-autocomplete with a v-model Object:

1. Data Setup: First, define your data, including the array of objects you will use for suggestions and the object you want to bind to v-model.

2. Use `item-value` and `item-title`: Use the item-value prop to specify the property from your object that acts as the value of the input (commonly an id). Use the item-title prop to set which property should be used to display the object in the dropdown and in the input field after selection (commonly a name).

3. Handle Change Events: You might also want to implement logic for handling changes of the model value in @update:model-value.

Example Code:

Let's illustrate with a concrete example:

<template>
  <v-autocomplete
    :items="items"
    item-title="name"
    item-value="id"
    v-model="selectedItem"
    label="Select Item"
    @update:model-value="handleSelectionChange"
  ></v-autocomplete>
  <p>Selected Item: {{ selectedItem }}</p>
</template>

<script setup>
  import { ref } from 'vue';

  const items = ref([
    { id: 1, name: 'Item A' },
    { id: 2, name: 'Item B' },
    { id: 3, name: 'Item C' }
  ]);

  const selectedItem = ref(null);

  const handleSelectionChange = (value) => {
    console.log('Selected item changed:', value);
  };
</script>

In this example, items is an array of objects with id and name. item-value="id" tells v-autocomplete to use the id as the value, and item-title="name" uses the name for display. The selectedItem ref is used as the v-model object. Whenever a selection is made, the entire object gets bound to selectedItem and it becomes available for use.

Important Notes:

- Ensure your items have the properties specified in item-value and item-title

- You could modify the selected item by providing a function to the @update:model-value attribute, as shown in the example above

- When initializing with a pre-selected item, make sure that your pre-selected object is the same object as the item from the array, or that the object id matches one of the ids from the items array. Otherwise, the component will not consider your object a part of the collection.

This approach makes using complex objects with v-autocomplete in Vuetify 3 straightforward while keeping your data binding clean and manageable. If you have any more questions about it, feel free to ask!

Learn more about this