vue js显示obj-array值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获取数据，在这里我想显示对象的分支名称，但是此显示紧随显示“ img_1”之后可以帮助我克服此问题。如果未显示图像，则显示[object object]类型的v-select会出现在列表中，而我想从obj数组中显示“分支名称”。

Answer 1

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

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

根据vuetify文档

  

将对象用于道具道具时，必须将项目文本和项目值与对象上的现有属性相关联。这些值默认为文本和值，并且可以更改。

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

 <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