CODEWITHSUNDEEP
vue.jsvuetify.js
TheDevGuy
TheDevGuy

Reputation: 703

Loop on object in vue

I need to display all the version on the select menu, Now I only have 2 select with double labeled

I want 2 separate labels ans each have his selectedVersion in V-model

https://codepen.io/czechsebastian/pen/jOPYmJZ?editors=1011

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data (){
    return{
      selectedVersion: {
        car: null,
        motorcycle: null
      },
      version: [
        {
          "car": [
          "1.0",
          "1.2",
          "1.3",
          "1.4",
        ],
        "motorcycle": [
          "2.1",
          "2.2",
          "2.3",
          "2.4",
        ],
      }]
    }
  },
})

Upvotes: 0

Views: 90

Answers (2)

TheDevGuy
TheDevGuy

Reputation: 703

I have it !

<div id="app">
  <v-app id="inspire">
    <v-layout row wrap class="pt-5" justify-center>
      <v-flex xs12 sm10 md8 lg6>
        <v-card class="pa-4 mb-4">
          <v-select v-for="(vers, type) in version[0]" 
                    outlined 
                    :items="vers"
                    dense 
                    v-model="selectedVersion[type]"
                    :label="type"
                    >
          </v-select>
          <p>Car selected: {{ selectedVersion.car }}</p>
          <p>Motorcycle selected: {{ selectedVersion.motorcycle }}</p>
        </v-card>
      </v-flex>
    </v-layout>
  </v-app>
</div>

Upvotes: 0

Sovalina
Sovalina

Reputation: 5609

If you can't modify the data, you can loop over the version object instead of create a itemsSelect computed property.

Change your selectedVersion data for an object:

data () {
  return {
    selectedVersion: {
      car: null,
      motorcycle: null
    }
  }
}

And the v-select like this: 

<v-select
  v-for="(array, versionType) in version"
  outlined
  :items="array"
  dense
  v-model="selectedVersion[versionType]"
  :label="versionType"
>
</v-select>

Codepen updated here

Upvotes: 1

Related Questions