如何在v-select中显示vue-dropdown的名称?

时间:2018-02-27 20:24:32

标签: vue.js vuejs2 vue-component vuex

我在我的vue-app中通过我的组件中的计算属性动态渲染V-select,但是我的select用[object Object]而不是值填充。如何设置name-property?我做错了吗?

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

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

我得到的值是这样的:

enter image description here

3 个答案:

答案 0 :(得分:3)

首先,: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")。< / LI>


解决方案

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

答案 1 :(得分:0)

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

  

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

如果你有一个对象数组,vuetify认为该数组看起来像:

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

如果您的对象没有上述格式,则必须使用item-textitem-value道具来访问VSelect。例如,如果数组看起来像:

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

您必须使用VSelect作为:

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

答案 2 :(得分:-1)

我可以解决v-select动态值pleace检查我的github链接并遵循代码

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