Question

我试图展示＆＃34;地点＆＃34;在vuetify选择组件中，但我当前的代码呈现＆＃34; [object Object]＆＃34;而不是位置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; 
  });
}

以下是位置数据的截图：

谢谢！

Answer 1

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

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

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

以下演示。

没有item-text：

＆＃13;

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' }
      ]
    }
  }
})

＆＃13;

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

＆＃13;

使用item-text：

＆＃13;

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' }
      ]
    }
  }
})

＆＃13;

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

＆＃13;

Answer 2

使手表具有低级对象数组

COALESCE()

如何将阵列数据加载到Vuetify选择输入

2 个答案: