根据对象类型值Vuetify v-select禁用选项

Question

在使用Vuetify v-select组件并使用prop multiple时，我们可以选择多个值。

在我的示例中，我有几个食谱，其参数为type为Breakfast或Dinner。

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

如果有人想尝试一下，这里是我的Codepen：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事件处理程序

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

<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

使用选定阵列上的观察者，我们可以检查选定配方是否具有相同类型：

<input autocomplete="off" type="date" class="form-control" id="date_cust" name="date_cust" required />

<p id="day"></p>
<p id="month"></p>

}

Answer 3

不需要事件或观察者

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>