如何在 v-select 中为 vue-dropdown 显示名称？

Question

我通过组件中的计算属性在我的 vue-app 中动态呈现 V-select，但我的选择填充了 [object Object] 而不是值。如何设置名称属性？我做错了吗？

下拉列表是它自己的组件：

<template>
    <v-select
      :items="listOfCompanys"
      label="Lokation"
      item-value="name"
      item-text="name"
      single-line
      bottom
    ></v-select>       
</template>

<script>
export default {
  name: 'companydropdown',
  computed: {
    listOfCompanys () {
      return this.$store.state.users.userList
    }
  }
}
</script>

我得到的值是这样的：

Answer 1

首先，:items of v-select 接受一个数组作为参数：

名称：items 默认值：[] 类型：Array

可以是对象数组或字符串数​​组。使用对象时， 将寻找 text 和 value 字段。这可以使用更改 item-text 和 item-value 道具。

所以，如果你正在使用：

<v-select
  :items="listOfCompanys"
  label="Lokation"
  item-value="name"
  item-text="name"
  single-line
  bottom
>

但是得到：

[object Object]

然后：

• 您的listOfCompanys 是一个对象（不是数组）；或
• 您的listOfCompanys 是一个单元素数组，其元素是一个不具有名为name 的属性的对象（因为您配置了item-value="name"）。

解决方案

• 将listOfCompanys 设为字符串数组（例如["John", "Smith"]）；

或

• 使listOfCompanys 成为具有以下属性的对象数组：
  • {name: "SomeName"}，如果你保留item-value="name" item-text="name"；或
  • {value: 123, text: "Yoyo"} 如果您删除 item-value 和 item-text 属性；或
  • {some1: "Bla", some2: 123} 如果您有 item-value="some1" 和 item-text="some2"（反之亦然）。

检查demo CodePen showing a solution here。

Answer 2

要在 VSelect 中显示项目，您必须知道计算属性返回的项目。

例如，如果计算属性返回一个数组，如：['one', 'two', 'three']... 那么 v-select 将自己完成这项工作。

如果你有一个对象数组，vuetify 认为这个数组看起来像：

arr = [
  { text: 'name', value: 'John'},
  { text: 'name', value: 'Mike'}
  ...
]

如果您的对象没有上述格式，您必须对 VSelect 使用 item-text 和 item-value 道具。例如，如果数组看起来像：

arr = [
 { header: 'name', column: 'name' },
 { header: 'lastName', column: 'lastName' }
]

您必须将 VSelect 用作​​：

<v-select
  :items="items"
  item-text="header"
  item-value="column"
>

Answer 3

我可以解决v-select动态值请查看我的github链接并按照代码进行

https://github.com/chirumist/vuetify-select2/blob/master/README.md