Vuetify: MultiSelectComponent - bcgov/healthgateway GitHub Wiki

General

  • Swap <MultiSelectComponent for <v-select>.
  • Swap :values and @update:values props for v-model.
  • Swap :options prop for :items.
  • Swap placeholder prop for hint.
    • Optionally, apply the persistent-hint prop.
  • Populate label prop to identify the field.
  • Apply the multiple, chips, closable-chips, and hide-selected props to imitate <MultiSelectComponent> behaviour.
  • Apply the eager prop to improve performance with a large number of items.

Example Code

<v-select
    v-model="selectedMedicationOptions"
    :items="medicationOptions"
    label="Medications"
    hint="Choose medications"
    persistent-hint
    multiple
    chips
    closable-chips
    hide-selected
    eager
/>

Example Output

image

⚠️ **GitHub.com Fallback** ⚠️