如何在 v-select 中为 vue-dropdown 显示名称?
Posted
技术标签:
【中文标题】如何在 v-select 中为 vue-dropdown 显示名称?【英文标题】:How do you display a name in v-select for a vue-dropdown? 【发布时间】:2018-08-07 14:39:10 【问题描述】:我通过组件中的计算属性在我的 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>
我得到的值是这样的:
【问题讨论】:
你userList
的数据结构是什么样的?
【参考方案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。
【讨论】:
对于 v3,some1: "Bla", some2: 123
如果您有 :reduce="item=>item.some1"
和 label="some2"
(反之亦然)【参考方案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"
>
【讨论】:
【参考方案3】:我可以解决v-select动态值请查看我的github链接并按照代码进行
https://github.com/chirumist/vuetify-select2/blob/master/README.md
【讨论】:
欢迎来到 SO。值得添加到您的答案中以解释为什么使用它会有所帮助。以上是关于如何在 v-select 中为 vue-dropdown 显示名称?的主要内容,如果未能解决你的问题,请参考以下文章
Vuetify - 如何在自定义文本时包含复选框以进行 v-select
如何在 vue.js 2 中设置 v-select 中选择的选项值?
在vuejs中使用`v-select`时如何获取`id`值作为选项值和`cname`作为选项标签?