如何在 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

可以是对象数组或字符串数​​组。使用对象时, 将寻找 textvalue 字段。这可以使用更改 item-textitem-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-valueitem-text 属性;或 some1: "Bla", some2: 123 如果您有 item-value="some1"item-text="some2"(反之亦然)。

检查demo CodePen showing a solution here

【讨论】:

对于 v3,some1: "Bla", some2: 123 如果您有 :reduce="item=&gt;item.some1"label="some2"(反之亦然)【参考方案2】:

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

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

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

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

如果您的对象没有上述格式,您必须对 VSelect 使用 item-textitem-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 显示名称?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 v-select 中调用选择更改的函数? [复制]

Vuetify - 如何在自定义文本时包含复选框以进行 v-select

如何在 vue.js 2 中设置 v-select 中选择的选项值?

在vuejs中使用`v-select`时如何获取`id`值作为选项值和`cname`作为选项标签?

如何在 vuetify 弹出模式上放置要使用输入元素(v-select)固定的下拉项?

如何减小 vuetify 输入的大小(v-select/v-input)