Loop on object in vue

Question

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",
        ],
      }]
    }
  },
})

score 1 · Answer 1 · answered Mar 10 '20 at 20:35

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

If I have an Array instead an Object like the updated code , How can I do to be right ? — TheDevGuy, Mar 11 '20 at 11:52

score 0 · Answer 2 · answered Mar 11 '20 at 14:24

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>

Loop on object in vue

2 Answers2