Set initial vuetify v-select value

Question

Can someone help me set the default value for a v-select? The caveat is that my v-select is populated with objects, which I think might be the reason why assigning my item-value to my desired initial value isn't working:

<v-select
  item-text="name"
  v-model="defaultSelected"
  :items="people"
>

Vue.use(Vuetify);

const vm = new Vue({
  el: "#app",
  data: {
    defaultSelected: {
      name: "John",
      last: "Doe"
    },
    people: [
      {
        name: "Harry",
        last: "Potter"
      },
      {
        name: "George",
        last: "Bush"
      }
    ]
  }
});

Expected:

The initial v-select should be John

Actual:

The initial v-select is blank. Here's a fiddle for reference:

https://jsfiddle.net/tgpfhn8m/734/

How can I get the behaviour I expect?

score 76 · Accepted Answer · answered Jul 18 '18 at 02:45

I believe there are two issues with your set up. Firstly, the initial value should be one of the options in select, i.e., you should have people include your defaultSelected; Secondly your object needs to contain a value field, see v-select props. Otherwise you need to specify item-value prop; See a working example here.

<v-select
  item-text="name"
  item-value="last"
  v-model="defaultSelected"
  :items="people"
>

Vue.use(Vuetify);

 const vm = new Vue({
  el: "#app",
  data: {
    defaultSelected: {
      name: "John",
      last: "Doe"
    },
    people: [
      {
        name: "John",
        last: "Doe"
      },
      {
        name: "Harry",
        last: "Potter"
      },
      {
        name: "George",
        last: "Bush"
      }
    ]
  }
});

Note: Array must be an object or string primitives like numbers won't work. — Indrasinh Bihola, May 07 '19 at 05:18

score 28 · Answer 2 · edited Jul 15 '22 at 19:54

Alternative answer for those finding this question from a search...

How to select default value using an attribute of an object

<template>

   <v-select v-model="input.user_id" :items="users" item-value="id" item-text="name" label="Users"/>

</template>

<script>
  export default {
    data: () => ({
        input: {
            user_id: 2,
        },
        users: [
          {
            id: 1,
            name: "John",
            last: "Doe"
          },
          {
            id: 2,
            name: "Harry",
            last: "Potter"
          },
          {
            id: 3,
            name: "George",
            last: "Bush"
          }
        ]
    }),
  }
</script>

Fiddle example: https://jsfiddle.net/4c3tbj6m/

Explain usage:

v-model is a special interfacing method for the value attribute of an <input /> field.

item-value="id" tells the input field what attribute of a selected object item row to set as the value of input.user_id

item-text="name" tells the field what attribute of a selected object item row to use to display as the selected text.

See Official Documentation on v-model.

Example above is a select field so v-model is representing value of what would be a selected attribute of an option element like the following:

<option value="1" selected>John</option>

The value of input.user_id is the selected item (value set by the v-model bind)

You can then POST the entirety of input (if more input fields are added) but in this case there is only user_id in there:


methods: {

  save() {

    axios.post('/my/api/example', this.input).then(response => {

      console.log(response);

    })

  }

}

<v-btn @click.prevent="save">SAVE</v-btn>

This will POST a JSON object to your servers end point /my/api/example formatted like this:

{
  "user_id": 1
}

@armnotstrong Updated my answer with additional information. — Marc, Dec 25 '19 at 14:24

Vova · Answer 3 · 2023-01-18T08:20:59.297

for v-select you should use item-title, item-value and item-disabled props according to the official documentation.

<template>
    <section>
        <div>
            <label>Choose a poll:</label>
            <div>
                <v-select v-model="selected" :items="body" item-title="name" item-value="last" />
            </div>
        </div>
    </section>
</template>
<script>
  data: {
    selected: '',
    body: [
      {
        name: "Bob",
        last: "One"
      },
      {
        name: "Tom",
        last: "Dylan"
      },
      {
        name: "Mark",
        last: "Wen"
      }
    ]
  }

</script>

score 0 · Answer 4 · answered Mar 18 '21 at 01:15

For anyone who stumbles upon this and needs a vue 3 composition api typescript solution for select with objects:

<template>
            <select v-model="state.selectedShape">
                <option
                    v-for="(shape) in state.shapes"
                    :key="shape.id"
                    :value="shape">
                    {{ shape.description }}
                </option>
            </select>
</template>


<script>
         setup () {
            const state = reactive({
                selectedShape: new Shape(),
                shapes: Array<Shape>(),
            });
         }
</script>

Like this you can update the shape object and array equally and all of those will be reactive.

To get an initial value what I did was this because I also insert other values from an api, but I'm sure there's better ways:

        state.shapes.push(new Shape());

Either way, I did all this because I don't want null values, and instead of new Shape() I actually use a default shape which has the description "All", so that when I select it I have a Shape with no actual data and an id of 0.

score -3 · Answer 5 · answered Mar 17 '21 at 11:24

-3

just add selected:true

items: [
    {
      text: "Name",
      value: "name",
      selected: true,
    },
    {
      text: "Identifier",
      value: "id",
    },
    {
      text: "Episode",
      value: "ep",
    },
  ],

answered Mar 17 '21 at 11:24

SkyRideR

11
2

Set initial vuetify v-select value

5 Answers5

Linked