如何在 v-select 中为 vue-dropdown 显示名称? [英] How do you display a name in v-select for a vue-dropdown?

问题描述

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

Im dynamically rendering a V-select in my vue-app by a computed property in my component, but my select is populated with [object Object] instead of the values. How can I set the name-property? Am I doing this wrong?

下拉菜单是它自己的组件:

The dropdown is its own component:

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

我得到的值是这样的:

推荐答案

首先，:v-select 的 items 以数组为参数:

First of all, :items of v-select takes an array as argument:

名称:items 默认:[] 类型:Array

Name: items Default: [] Type: Array

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

Can be an array of objects or array of strings. When using objects, will look for a text and value field. This can be changed using the item-text and item-value props.

因此，如果您正在使用:

So, if you are using:

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

但是正在得到:

[object Object]

然后:

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

• your listOfCompanys is an object (not an array); or
• your listOfCompanys a one-element array whose element is an object that does not have a property called name (because you configured item-value="name").

• 使 listOfCompanys 成为一个字符串数组(例如 ["John", "Smith"]);

• Make listOfCompanys an array of strings (e.g. ["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"(反之亦然).
  • Make listOfCompanys an array of objects having the properties:
    • {name: "SomeName"}, if you keep item-value="name" item-text="name"; or
    • {value: 123, text: "Yoyo"} if you remove the item-value and item-text properties; or
    • {some1: "Bla", some2: 123} if you have item-value="some1" and item-text="some2" (or vice-versa).

    检查 演示 CodePen 在此处显示解决方案.

    这篇关于如何在 v-select 中为 vue-dropdown 显示名称?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！