[Vuejs]-Select menu on object of object

by

0👍

When you add vue like this you don’t return data.

data: {
  car: [ ... ]

https://jsfiddle.net/0dgv1L4h/2/

0👍

you need to use item-text and item-value props to specify the property name to use form items 

Vue.use(Vuetify);

new Vue({
  el: "#app",
  data() {
    return {
      cars: [{
          name: 'McQueen',
          versions: [
            { color: 'red' },
            { color: 'green' },
            { color: 'blue' }
          ]
      }, {
          name: 'Tesla',
          versions: [
            { color: 'orange' },
            { color: 'white' },
            { color: 'black' }
          ]
      }],
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://unpkg.com/vuetify@0.14.8/dist/vuetify.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet" type="text/css">
<link href="https://unpkg.com/vuetify@0.14.8/dist/vuetify.min.css" rel="stylesheet" type="text/css">
<div id="app">
  <v-app>
    <v-container fluid>
      <div v-for="car in cars">
        <h4>{{car.name}}</h4>
        <v-select 
          label="Version"
          :items="car.versions" 
          item-text="color" 
          item-value="color">
        </v-select>
      </div>
    </v-container>
  </v-app>
</div>

0👍

Refactor the v-select in the template to:

<v-select
  v-for="(c,index) in car"
  :items="c.version"
  :key="index"
  item-text="color"
>
</v-select>

Then in the car Array, there needs to be quotes around each instance of red, i.e. {color: 'red'}.

Vue.use(Vuetify);

var vm = new Vue({
  el: "#app",
  methods: {

  },
  data() {
    return {
    	car: [
        {
          name: 'McQueen',
          version: [
            {color: 'red' },                      
            {color: 'red' },
            {color: 'red' },
            {color: 'red' },
            {color: 'red' },
            {color: 'red' },
            {color: 'red' },
            {color: 'red' },
            {color: 'red' }
          ]
        }
      ],
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://unpkg.com/vuetify@1.0.19/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vuetify@1.0.19/dist/vuetify.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<div id="app">
<v-app >
<h1>Selection</h1>
<v-select
  v-for="(c,index) in car"
  :items="c.version"
  :key="index"
  item-text="color"
>
</v-select>
</v-app>
</div>

Leave a comment