When utilizing the Vuetify v-select component and setting the prop multiple, we can select multiple values at once.
In this scenario, I have a variety of recipes categorized under Breakfast or Dinner using the parameter type.
The goal is to deactivate all Breakfast options if the user selects any Dinner recipes, and vice versa.
For those interested in tackling this challenge, here is my codepen link: https://codepen.io/5less/pen/eYmaazj
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
selected: [],
recipes: [
{
'id': 1,
'name': 'Pizza',
'type': 'Dinner',
'disabled': false
},
{
'id': 2,
'name': 'Omelet',
'type': 'Breakfast',
'disabled': false
},
{
'id': 3,
'name': 'Scrambled Eggs',
'type': 'Breakfast',
'disabled': false
},
],
}
}
})
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-row align="center">
<v-col cols="12" sm="4">
<v-subheader v-text="'You can only select one type'"></v-subheader>
</v-col>
<v-col cols="12" sm="2">
<v-select
v-model="selected"
:items="recipes"
label="Select"
multiple
hint="Choose your meal"
persistent-hint
item-value="id"
item-text="name"
></v-select>
</v-col>
</v-row>
Selected: {{ selected }}<br>
Recipes: {{ recipes }}
</v-container>
</v-app>
</div>