CODEWITHSUNDEEP
vue.jsvue-componentvuetify.js
Daniyal Baig
Daniyal Baig

Reputation: 86

vue js display obj-array value v-select

HTML:

<v-select
  v-model="select"
  :items="items"
  :rules="[v => !!v || 'Item is required']"
  label="Branches"
  required
></v-select>

js:

FetchBranches()
  {
    //console.log('I am testing');
  this.$http.get('http://192.168.100.7:8020/api/Branch/GetAllBranchesName')
  .then((result) => {
    this.items=result.body;
    }).catch((err) => {
      console.log(err);
    });
  }

I am fetching data through .net api, here in vue i want to display Branch name from object but this display following display "img_1" help me to overcome this problem . if image is not showing then, the v-select showing [object object] type result in list and i want to show Branch Name from obj array.

screenshot

Upvotes: 0

Views: 2498

Answers (1)

eli
eli

Reputation: 9258

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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Upvotes: 2

Related Questions