How to load Array Data into Vuetify Select Input

Question

I'm trying to show "locations" in a vuetify select component, but my current code renders "[object Object]" instead of Location 1, Location 2, etc.

My select component:

<v-select
:items="locations"
v-model="location"
label="Choose Location"
bottom
autocomplete
></v-select>

Locations:

locations () {
  return this.$store.getters.getLocationsForEvent(this.event.id)
}

Vuex Getter:

getLocationsForEvent: (state) => (id) => {
  return state.loadedLocations.filter(function (location) { 
    return location.eventId === id; 
  });
}

Here is a screenshot of what the location data looks like:

Thanks!

Give an example of the data returned by the function getLocationsForEvent. — stdob--
– stdob--, Commented Mar 24, 2018 at 20:33

acdcjunior · Accepted Answer · 2018-03-24 20:57:36Z

12

For custom objects you have to specify the item-text. The item-text is what each option will display.

From your screenshot, for instance, title is a possible property:

<v-select
:items="locations"
v-model="location"
label="Choose Location"
item-text="title"
bottom
autocomplete
></v-select>

Demos below.

Without item-text:

new Vue({
  el: '#app',
  data () {
    return {
      location: null,
      locations: [
        { id: "1111", manager: 'Alice',  title: 'Water Cart 1' },
        { id: "2222", manager: 'Bob',    title: 'Water Cart 2' },
        { id: "3333", manager: 'Neysa',  title: 'Water Cart 3' }
      ]
    }
  }
})

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'>
<link rel='stylesheet' href='https://unpkg.com/[email protected]/dist/vuetify.min.css'>
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<script src='https://unpkg.com/[email protected]/dist/vuetify.min.js'></script>

<div id="app">
  <v-app>
    <v-container>
      <v-select
        :items="locations"
        v-model="location"
        label="Choose Location"
        bottom
        autocomplete
        >
      </v-select>
    </v-container>
  </v-app>
</div>

With item-text:

new Vue({
  el: '#app',
  data () {
    return {
      location: null,
      locations: [
        { id: "1111", manager: 'Alice',  title: 'Water Cart 1' },
        { id: "2222", manager: 'Bob',    title: 'Water Cart 2' },
        { id: "3333", manager: 'Neysa',  title: 'Water Cart 3' }
      ]
    }
  }
})

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'>
<link rel='stylesheet' href='https://unpkg.com/[email protected]/dist/vuetify.min.css'>
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<script src='https://unpkg.com/[email protected]/dist/vuetify.min.js'></script>

<div id="app">
  <v-app>
    <v-container>
      <v-select
        :items="locations"
        v-model="location"
        label="Choose Location"
        item-text="title"
        bottom
        autocomplete
        >
      </v-select>
    </v-container>
  </v-app>
</div>

edited Mar 24, 2018 at 20:57

answered Mar 24, 2018 at 20:38

acdcjunior

136k37 gold badges341 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user13553026 Over a year ago

Is it possible to use two properties? Something like title and manager?

acdcjunior Over a year ago

@KeinGenie Not that I'm aware of. I think in that case you would have to create a derived property (result of the calculation using title and manager) and use that property as item-text.

Goodlife · Accepted Answer · 2020-12-14 08:43:44Z

1

implemeneted a watch to have a low level Array of objects

watch: {
    groupInfo: function(groupInfo) {
      if (groupInfo.teams !== undefined) {
        var newArray = [];
        for (var key in groupInfo.teams) {
          var obj = groupInfo.teams[key];
          newArray.push(obj);
        }
        console.log("wagwan" newArray)
        this.teams = newArray;
      }
    }
  },

answered Dec 14, 2020 at 8:43

Goodlife

3,9222 gold badges26 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to load Array Data into Vuetify Select Input

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related