Set initial vuetify v-select value

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

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}

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.