基於對象類型值的 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;
        }
      }
    }

}