CODEWITHSUNDEEP
vuetify.js
Ayman Tarig
Ayman Tarig

Reputation: 191

How to set value for each v-select component item

I've a v-select vuetify component and I've an object where the key is Id and value is name I want the for each v-select item the value be the Id and the text is the name How to do that ?

example for my object is {"1":"calculus 1","2":"linear algebra"}

Upvotes: 0

Views: 576

Answers (1)

Madison Lai
Madison Lai

Reputation: 301

This will need to be a two-step process

1) Change your Object into an array, this is the format v-select is expecting

  this.classesArray = Object.keys(this.classes).map(i => {
  let formattedClass = {
    id: i,
    text: this.classes[i]
  }
  return formattedClass

2) Use your newly created array within the v-select

<v-select
   v-model="selectedClass"
   :items="classesArray"
   item-text="text"
   item-value="id"
></v-select>

Here's the code pen if you want to see it in action: https://codepen.io/Madison_Lai/pen/JjjKXWG?editors=1011

Upvotes: 3

Related Questions