[英]Vuetify v-select disable options based on object type value
When using Vuetify v-select
component and using the prop multiple
we can multi select values.当使用 Vuetify
v-select
组件并使用 prop multiple
我们可以多选值。
In my example I have several recipes with a parameter type
of Breakfast or Dinner.在我的示例中,我有几个参数
type
为早餐或晚餐的食谱。
I want to disable all options for type Breakfast if the user chooses any Dinner recipes, same the other way around.如果用户选择任何晚餐食谱,我想禁用类型早餐的所有选项,反之亦然。
Here is my codepen if anyone wants to have a go at this: https://codepen.io/5less/pen/eYmaazj如果有人想尝试一下,这是我的代码笔: 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="Pick 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>
change
event handlerchange
事件处理程序Add change
event handler for v-select
.为
v-select
添加change
事件处理程序。 Like this:像这样:
<v-select
@change="onSelect"
v-model="selected"
:items="recipes"
label="Select"
multiple
hint="Pick your meal"
persistent-hint
item-value="id"
item-text="name"
></v-select>
Then in this handler disable all items that have different type:然后在此处理程序中禁用所有具有不同类型的项目:
methods: {
onSelect(e) {
if (e.length == 0) {
this.recipes.forEach((item) => item.disabled = false)
} else {
let chosen = this.recipes.filter((item) => item.id==e[0])
this.recipes.forEach((item) => {
if (item.type != chosen[0].type) {
item.disabled = true
}
})
}
}
}
Another way is just to add watcher for selected
:另一种方法是为
selected
添加观察者:
watch: {
selected: function (e) {
if (e.length == 0) {
this.recipes.forEach((item) => item.disabled = false)
} else {
let chosen = this.recipes.filter((item) => item.id==e[0])
this.recipes.forEach((item) => {
if (item.type != chosen[0].type) {
item.disabled = true
}
})
}
}
},
Vuetify v-select
offers the item-disabled
prop, which accepts a function that should return true
if the item should be disabled and false
otherwise. Vuetify
v-select
提供了item-disabled
属性,它接受一个函数,如果该项目应该被禁用,它应该返回true
,否则返回false
。
<template>
<v-select
v-model="selected"
:item-disabled="disableItem"
:items="items"
multiple
/>
</template>
<script>
export default {
data () {
return {
selected: ['name'],
items: [
{
text: 'Nome de A à Z',
value: 'name'
},
{
text: 'Nome de Z à A',
value: '-name'
},
{
text: 'Mais recente à mais antiga',
value: '-updated_at'
},
{
text: 'Mais antiga à mais recente',
value: 'updated_at'
}
]
}
},
methods: {
disableItem (item) {
let invertedValue
if (item.value.match(/^-/)) {
invertedValue = item.value.replace(/^(-)/, '')
} else {
invertedValue = '-' + item.value
}
return this.selected.includes(invertedValue)
}
}
}
</script>
Using a watcher on selected array we can check if the selected recipes is of the same type:在选定数组上使用观察器,我们可以检查选定的配方是否属于同一类型:
watch: {
selected: function() {
for (const i in this.recipes) {
if (this.selected.length && this.recipes[i].type != this.recipes[this.recipes.findIndex(x => x.id === this.selected[0])].type) {
this.recipes[i].disabled = true;
} else {
this.recipes[i].disabled = false;
}
}
}
} }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.