[Vuejs]-Vue js display obj-array value v-select

by

2👍

✅

Though you didn’t specify how your array looks like let me assume your array of objects looks like this:

languages : [
       {name: "English",  value:"en"},
       {name: "French",   value:"fr"},
       {name: "Arabic",   value:"ar"},
       {name: "Swahili",   value:"sw"},
],

According to vuetify documentation

When using objects for the items prop, you must associate item-text and item-value with existing properties on your objects. These values are defaulted to text and value and can be changed.

So to view the list of your languages do as shown below

 <v-select
          v-model="language"
          :items="languages"
          item-text="name" // this will appear in your text
          item-value="value" // this will be tracked when value changed
          label="Select Language"
          persistent-hint
          return-object
          @change="changeLanguage(language.value)"
        ></v-select>

Find the full example here

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-container>
         <v-card
    class="mx-auto"
    max-width="500"
  >
   

    <v-toolbar
      color="indigo"
      dark
    >
      <v-app-bar-nav-icon></v-app-bar-nav-icon>

      <v-toolbar-title>{{title}}</v-toolbar-title>

      <v-spacer></v-spacer>

      <v-btn icon disabled>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>
    </v-toolbar>
     <v-container fluid>
     <v-card>
      <v-img src="https://cdn.vuetifyjs.com/images/cards/road.jpg" class="white--text align-end"
              gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)" height="150px"
            >
              <v-card-title>{{language}}</v-card-title>
            </v-img>
     </v-card>
     <v-card-text>
         
          <div>
          <v-select
          v-model="language"
          :items="languages"
          item-text="name" // this will appear in your text
          item-value="value" // this will be tracked when value changed
          label="Select Language"
          persistent-hint
          return-object
          @change="changeLanguage(language)"
        ></v-select>
          </div>
          </v-card-text>
     
     </v-container>
    </v-card>
        
        </v-container>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script>
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
    
      el: '#app',
      vuetify: new Vuetify(),
      data:()=>({
      title: "Vuetify v-select example",
      language:"",
      languages : [
       {name: "English",  value:"en"},
       {name: "French",   value:"fr"},
       {name: "Arabic",   value:"ar"},
       {name: "Swahili",   value:"sw"},
       {name: "Yoruba",   value:"yr"},
],
      
      }),
      methods:{
      changeLanguage(item){
      this.language = "You have selected: "+ item.name + " (" + item.value +")";
   }
  }
});
  </script>
</body>
</html>
👤eli

Leave a comment