Multiple Select

The following example demonstrates how to use the VueSelect component to create a multiple select dropdown.

WARNING

Setting is-multi to true will change the v-model to become an array of strings string[]. Make sure to update your v-model accordingly.

Selected value(s): none

Demo source-code

<script setup lang="ts">
import "vue3-select-component/dist/style.css";

import { ref } from "vue";
import VueSelect from "vue3-select-component";

// When setting `is-multi` to `true`, the `v-model` should be an array of strings.
const selected = ref<string[]>([]);
</script>

<template>
  <VueSelect
    v-model="selected"
    :is-multi="true"
    :options="[
      { label: 'Option #1', value: 'option_1' },
      { label: 'Option #2', value: 'option_2' },
      { label: 'Option #3', value: 'option_3' },
    ]"
  />
</template>