vue js 显示obj-数组值v-select

Question

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);
    });
  }

我正在通过 .net api 获取数据，在 vue 中，我想显示对象的分支名称，但是显示 "img_1" 之后的显示帮助我克服了这个问题。如果图像未显示，则 v-select 显示 [object object] 类型导致列表，我想显示 obj 数组中的分支名称。

Answer 1

尽管您没有指定数组的外观，但让我假设您的对象数组如下所示：

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

根据 vuetify 文档

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.

因此，要查看您的语言列表，请执行以下操作

 <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>

找到完整的例子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>

vue js 显示obj-数组值v-select

vue js display obj-array value v-select

vue.js

vue-component

vuetify.js