# Issues with v-autocomplete Rendering Array Values

**URL:** https://discourse.nodered.org/t/issues-with-v-autocomplete-rendering-array-values/90390
**Category:** General
**Tags:** dashboard-2
**Created:** [24 August 2024 08:03 UTC](https://discourse.nodered.org/t/issues-with-v-autocomplete-rendering-array-values/90390 "2024-08-24T08:03:06Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![DhamodharanGopal](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dhamodharangopal/32/95512_2.png) [@DhamodharanGopal](https://discourse.nodered.org/u/DhamodharanGopal)
#### Post date: [24 August 2024 08:03 UTC](https://discourse.nodered.org/t/issues-with-v-autocomplete-rendering-array-values/90390/1 "2024-08-24T08:03:06Z")

</div>

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.

```auto
<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]

 ![Screenshot from 2024-08-24 13-31-47](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/f/0f899a1b5e19d1fbdc87596a6342df5b0819f9f9.png)

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

Thank you!

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [24 August 2024 08:17 UTC](https://discourse.nodered.org/t/issues-with-v-autocomplete-rendering-array-values/90390/2 "2024-08-24T08:17:26Z")

</div>

The usage help shows items as an array of string: [Autocomplete component — Vuetify](https://vuetifyjs.com/en/components/autocompletes/#usage)

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [22 November 2024 08:17 UTC](https://discourse.nodered.org/t/issues-with-v-autocomplete-rendering-array-values/90390/3 "2024-11-22T08:17:30Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.