基于对象类型值的 Vuetify v-select 禁用选项

Question

当使用 Vuetify v-select组件并使用 prop multiple我们可以多选值。

在我的示例中，我有几个参数type为早餐或晚餐的食谱。

如果用户选择任何晚餐食谱，我想禁用类型早餐的所有选项，反之亦然。

如果有人想尝试一下，这是我的代码笔： 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>

Answer 1

选项 1 - change事件处理程序

为v-select添加change事件处理程序。 像这样：

<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>

然后在此处理程序中禁用所有具有不同类型的项目：

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
          }
        })
      }
  }
}

选项 2 - 观察者

另一种方法是为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
         }
       })
     }
    }
  },

Answer 2

不需要事件或观察者

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>

Answer 3

在选定数组上使用观察器，我们可以检查选定的配方是否属于同一类型：

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;
        }
      }
    }

}