How do you display a name in v-select for a vue-dropdown?

问题

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>

The values im getting is like this:

回答1:

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

Name: items Default: [] Type: Array

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
>

But is getting:

[object Object]

Then either:

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").

Solution

Make listOfCompanys an array of strings (e.g. ["John", "Smith"]);

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

Check demo CodePen showing a solution here.

回答2:

To show the items in VSelect you have to know what items the computed property returns.

For example if the computed property returns an array like: ['one', 'two', 'three']... Then v-select will do the job itself.

If you have an array of objects vuetify thinks that the array looks like:

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

In case that your objects doesn't have the above format you have to use item-text and item-value props to the VSelect. For example if the array looks like:

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

You have to use VSelect as:

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

回答3:

i can solve v-select dynamic value pleace check my github link and follow the code

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

来源：https://stackoverflow.com/questions/49017322/how-do-you-display-a-name-in-v-select-for-a-vue-dropdown

标签

Vue.js

vuejs2

vue-component

vuex