How to set initial Vuetify v-select value with Vue.js?

Sometimes, we want to set initial Vuetify v-select value with Vue.js.

In this article, we’ll look at how to set initial Vuetify v-select value with Vue.js.

How to set initial Vuetify v-select value with Vue.js?

To set initial Vuetify v-select value with Vue.js, we set the value of the reactive property that’s bound to v-model to the value of the property that we set as the value of the item-value prop of the v-select.

For instance, we write

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

<script>
//...
export default {
  //...
  data() {
    return {
      input: {
        userId: 2,
      },
      users: [
        {
          id: 1,
          name: "John",
          last: "Doe",
        },
        {
          id: 2,
          name: "Harry",
          last: "Potter",
        },
        {
          id: 3,
          name: "Jane",
          last: "Smith",
        },
      ],
    };
  },
  //...
};
</script>

to set the input.userId reactive property to 2, which is value of the id property of the item in users that we want to be the default.

Therefore, ‘Harry Potter’ would be the default value since it has id 2 and item-value is set to id.

How to set initial Vuetify v-select value with Vue.js?

Conclusion