Search code examples
vue.jsvuetify.jsv-select

How to properly use select in vuetify?

I currently using vuetify, and so far the code below is working <v-select>.

<v-select
    :items="order_by_opt"
    v-model="order_column"
    label="Order By"
    outlined
></v-select>

//script
data() {
    order_by_opt: ["Last Added", "Name", "Year Joined", "Age", "Date of Birth", ..etc.],
    order_column: ''
}

I just want to ask how can we translate the html code below to v-select

<select>
    <option value="last_added">Last Added</option>
    <option value="name">Name</option>
    //more options here
</select>

In which label and value is different like for example below. If I select Last Added, then I should get the value last_added?

Solution

  • You can do that by providing an array of objects, like this example in the docs. The props define which option property represents the selected value, and which is the display value.