如何将数组数据加载到 Vuetify 选择输入中

Posted 2023-02-22

【中文标题】如何将数组数据加载到 Vuetify 选择输入中

【英文标题】：How to load Array Data into Vuetify Select Input

【发布时间】：2018-09-03 07:21:52

【问题描述】：

我试图在 vuetify 选择组件中显示“位置”，但我当前的代码呈现“[对象对象]”而不是位置 1、位置 2 等。

我的选择组件：

<v-select
:items="locations"
v-model="location"
label="Choose Location"
bottom
autocomplete
></v-select>

地点：

locations () 
  return this.$store.getters.getLocationsForEvent(this.event.id)

Vuex Getter：

getLocationsForEvent: (state) => (id) => 
  return state.loadedLocations.filter(function (location)  
    return location.eventId === id; 
  );

这是位置数据的截图：

谢谢！

【问题讨论】：

举例说明函数getLocationsForEvent返回的数据。

我添加了实际数据的截图

【参考方案1】：

实现了一个具有低级对象数组的手表

watch: 
    groupInfo: function(groupInfo) 
      if (groupInfo.teams !== undefined) 
        var newArray = [];
        for (var key in groupInfo.teams) 
          var obj = groupInfo.teams[key];
          newArray.push(obj);
        
        console.log("wagwan" newArray)
        this.teams = newArray;
      
    
  ,

【参考方案2】：

对于自定义对象，您必须指定item-text。 item-text 是每个选项将显示的内容。

例如，从您的屏幕截图中，title 是一个可能的属性：

<v-select
:items="locations"
v-model="location"
label="Choose Location"
item-text="title"
bottom
autocomplete
></v-select>

下面的演示。

没有item-text：

new Vue(
  el: '#app',
  data () 
    return 
      location: null,
      locations: [
         id: "1111", manager: 'Alice',  title: 'Water Cart 1' ,
         id: "2222", manager: 'Bob',    title: 'Water Cart 2' ,
         id: "3333", manager: 'Neysa',  title: 'Water Cart 3' 
      ]
    
  
)

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'>
<link rel='stylesheet' href='https://unpkg.com/vuetify@1.0.10/dist/vuetify.min.css'>
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<script src='https://unpkg.com/vuetify@1.0.10/dist/vuetify.min.js'></script>

<div id="app">
  <v-app>
    <v-container>
      <v-select
        :items="locations"
        v-model="location"
        label="Choose Location"
        bottom
        autocomplete
        >
      </v-select>
    </v-container>
  </v-app>
</div>

与item-text:

new Vue(
  el: '#app',
  data () 
    return 
      location: null,
      locations: [
         id: "1111", manager: 'Alice',  title: 'Water Cart 1' ,
         id: "2222", manager: 'Bob',    title: 'Water Cart 2' ,
         id: "3333", manager: 'Neysa',  title: 'Water Cart 3' 
      ]
    
  
)

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'>
<link rel='stylesheet' href='https://unpkg.com/vuetify@1.0.10/dist/vuetify.min.css'>
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<script src='https://unpkg.com/vuetify@1.0.10/dist/vuetify.min.js'></script>

<div id="app">
  <v-app>
    <v-container>
      <v-select
        :items="locations"
        v-model="location"
        label="Choose Location"
        item-text="title"
        bottom
        autocomplete
        >
      </v-select>
    </v-container>
  </v-app>
</div>

【讨论】：

是否可以使用两个属性？诸如头衔和经理之类的东西？

@KeinGenie 我不知道。我认为在这种情况下，您必须创建一个派生属性（使用标题和管理器计算的结果）并将该属性用作item-text。