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

Question

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:

Solution 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"]);

or

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

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

Comments

[Nick]

Welcome to SO. It would be worth adding to your answer to explain why using this would help.

[Faizan Zahid]

For v3, {some1: "Bla", some2: 123} if you have :reduce="item=>item.some1" and label="some2" (or vice-versa)