如何将数组数据加载到 Vuetify 选择输入中 [英] How to load Array Data into Vuetify Select Input

问题描述

我正在尝试在 vuetify 选择组件中显示位置"，但我当前的代码呈现[object Object]"而不是位置 1、位置 2 等.

我的选择组件:

地点:

locations () {返回 this.$store.getters.getLocationsForEvent(this.event.id)}

Vuex 获取器:

getLocationsForEvent: (state) =>(id) =>{返回 state.loadedLocations.filter(function (location) {返回 location.eventId === id;});}

以下是位置数据的屏幕截图:

谢谢！

解决方案

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

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

下面的演示.

没有item-text:

new Vue({el: '#app',数据 () {返回 {位置:空，地点:[{ 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|材料+图标><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="应用程序"><v-app><v-容器><v-选择:items="位置"v-model="位置"标签=选择位置"底部自动完成></v-select></v-容器></v-app>

使用item-text:

new Vue({el: '#app',数据 () {返回 {位置:空，地点:[{ 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|材料+图标><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="应用程序"><v-app><v-容器><v-选择:items="位置"v-model="位置"标签=选择位置"项目文本=标题"底部自动完成></v-select></v-容器></v-app>

I'm trying to show "locations" in a vuetify select component, but my current code renders "[object Object]" instead of Location 1, Location 2, etc.

My select component:

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

Locations:

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

Vuex Getter:

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

Here is a screenshot of what the location data looks like:

Thanks!

解决方案

For custom objects you have to specify the item-text. The item-text is what each option will display.

From your screenshot, for instance, title is a possible property:

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

Demos below.

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

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

这篇关于如何将数组数据加载到 Vuetify 选择输入中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！