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

Sovalina · Accepted Answer · 2020-03-10 20:35:40Z

1

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

answered Mar 10, 2020 at 20:35

Sovalina

5,6094 gold badges25 silver badges41 bronze badges

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

1 Comment

TheDevGuy Over a year ago

If I have an Array instead an Object like the updated code , How can I do to be right ?

TheDevGuy · Accepted Answer · 2020-03-11 14:24:10Z

0

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>

answered Mar 11, 2020 at 14:24

TheDevGuy

7132 gold badges12 silver badges27 bronze badges

Collectives™ on Stack Overflow

Loop on object in vue

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related