Issues with v-autocomplete Rendering Array Values

[DhamodharanGopal]

Hi Everyone,

I’m currently working on a Vue.js component that uses Vuetify's v-autocomplete to allow users to select from a list of geolocations. However, I'm encountering an issue where the selected values are not rendered correctly. Instead of displaying the names of the selected items, the v-autocomplete component is showing the entire array object.

Here’s a brief overview of what I'm trying to achieve:

• Component: v-autocomplete
• Purpose: To allow users to select one or more geolocations from a list.

Problem: When selecting items from the dropdown, the v-autocomplete component displays [object Object] instead of the actual name of the selected item.

<template>
  <v-form @submit.prevent="submitForm">
    <v-autocomplete
      v-model="selectedGeolocations"
      :items="geolocations"
      item-text="name"
      item-value="name"
      label="Select Data Center Location"
      placeholder="Search for a data center"
      clearable
      multiple
      chips
      closable-chips
    ></v-autocomplete>

    <v-btn type="submit" color="primary">Submit</v-btn>
  </v-form>
</template>

<script>
export default {
  data() {
    return {
      geolocations: [
        { name: "New York, USA" },
        { name: "London, UK" },
        { name: "Tokyo, Japan" },
        { name: "Sydney, Australia" },
        { name: "Paris, France" },
        { name: "Frankfurt, Germany" },
        { name: "Toronto, Canada" },
        { name: "Singapore" },
        { name: "Mumbai, India" },
        { name: "São Paulo, Brazil" },
        { name: "Dubai, UAE" },
        { name: "Hong Kong" },
        { name: "Seoul, South Korea" },
        { name: "Amsterdam, Netherlands" },
        { name: "Stockholm, Sweden" },
        { name: "Johannesburg, South Africa" },
        { name: "Milan, Italy" },
        { name: "Zurich, Switzerland" },
        { name: "Madrid, Spain" },
        { name: "Chicago, USA" },
      ],
      selectedGeolocations: [],
    };
  },
  methods: {
    submitForm() {
      if (this.selectedGeolocations.length > 0) {
        console.log("Selected Geolocations:", this.selectedGeolocations);
        // Handle form submission with selectedGeolocations
      } else {
        console.log("Please select one or more geolocations");
      }
    },
  },
};
</script>

Issue Description:

• The v-autocomplete component displays [object Object] instead of the name of the selected items. This issue occurs even though item-text and item-value are set to name.

What I've Tried:

• Double-checked the item-text and item-value bindings.
• Verified the format of the geolocations array.

Screenshots: [Attached Below]

Any help or suggestions to resolve this issue would be greatly appreciated.

Thank you!

[Steve-Mcl]

The usage help shows items as an array of string: Autocomplete component — Vuetify