如何确保Vuetify Combobox/Vue-Combobox选中项属于其选项集合？

Alright, let's walk through how to enforce that the selected value in both Vuetify Combobox and Vue-Combobox is always from their predefined options. I've got practical, actionable approaches for each component that you can implement right away:

Vuetify's Combobox lets users type custom input by default, so we need to add checks to lock selections to your predefined items list. Here are two reliable methods:

Method 1: Validate on change Event (for Object/Value Options) #

If your items are an array of objects, enable return-object and validate the selection whenever it changes:

<template>
  <v-combobox
    v-model="selectedItem"
    :items="presetItems"
    return-object
    @change="validateSelection"
    label="Pick a valid option"
  ></v-combobox>
</template>

<script>
export default {
  data() {
    return {
      selectedItem: null,
      presetItems: [
        { text: "Project Alpha", value: "alpha" },
        { text: "Project Beta", value: "beta" },
        { text: "Project Gamma", value: "gamma" }
      ]
    };
  },
  methods: {
    validateSelection() {
      // Check if the selected item exists in our preset list
      const isItemValid = this.presetItems.some(item => item.value === this.selectedItem?.value);
      
      if (!isItemValid) {
        // Reset to null and alert the user
        this.selectedItem = null;
        alert("Oops! Please select an option from the dropdown list.");
      }
    }
  }
};
</script>

Method 2: Use a Computed Property to Intercept Input (for String Options) #

For simple string-based items, a computed property acts as a gatekeeper for your v-model:

<template>
  <v-combobox
    v-model="validatedSelection"
    :items="presetItems"
    label="Choose an option"
  ></v-combobox>
</template>

<script>
export default {
  data() {
    return {
      internalSelection: "",
      presetItems: ["Design", "Development", "Testing"]
    };
  },
  computed: {
    validatedSelection: {
      get() {
        return this.internalSelection;
      },
      set(newValue) {
        // Only accept values that are in our preset list or empty string
        if (this.presetItems.includes(newValue) || newValue === "") {
          this.internalSelection = newValue;
        } else {
          alert("Invalid selection! Please pick from the given options.");
          // Keep the previous valid selection instead of resetting (optional)
        }
      }
    }
  }
};
</script>

Assuming you're using a popular Vue Combobox library (like @vueform/combobox or similar), the approach mirrors Vuetify—we just adapt to the component's specific events and props:

Method 1: Validate on select Event #

Most Vue Combobox components emit a select event when a value is chosen. Use this to check against your choices collection:

<template>
  <combobox
    v-model="selectedChoice"
    :options="choices"
    @select="validateChoice"
    placeholder="Select a fruit"
  ></combobox>
</template>

<script>
import Combobox from "vue-combobox"; // Adjust import based on your library

export default {
  components: { Combobox },
  data() {
    return {
      selectedChoice: null,
      choices: ["Apple", "Banana", "Cherry", "Date"]
    };
  },
  methods: {
    validateChoice(selectedValue) {
      if (!this.choices.includes(selectedValue)) {
        this.selectedChoice = null;
        alert("Please pick a valid fruit from the list!");
      }
    }
  }
};
</script>

Method 2: Computed Property for Object-Based Choices #

If your choices are objects, use a computed property to validate the selected object's uniqueness:

<template>
  <combobox
    v-model="validatedChoice"
    :options="choices"
    placeholder="Pick a color"
    option-label="name"
    option-value="hex"
  ></combobox>
</template>

<script>
import Combobox from "vue-combobox";

export default {
  components: { Combobox },
  data() {
    return {
      _selectedChoice: null,
      choices: [
        { name: "Crimson", hex: "#DC143C" },
        { name: "Forest Green", hex: "#228B22" },
        { name: "Royal Blue", hex: "#4169E1" }
      ]
    };
  },
  computed: {
    validatedChoice: {
      get() {
        return this._selectedChoice;
      },
      set(newValue) {
        // Check if the selected object's hex exists in our choices
        const choiceExists = this.choices.some(choice => choice.hex === newValue?.hex);
        
        if (choiceExists || newValue === null) {
          this._selectedChoice = newValue;
        } else {
          console.warn("Invalid color selected—resetting to last valid choice");
          // Leave _selectedChoice as is to retain the previous valid value
        }
      }
    }
  }
};
</script>

Quick Summary #

The core idea across both components is simple: intercept the user's selection, compare it to your predefined list, and reject or reset any invalid values. Whether you use event listeners or computed properties depends on your data structure and component preferences.

内容的提问来源于stack exchange，提问作者something-not-here