Basic usage

Let's see the most basic usage of the component:

<template>
  <vue-cascader-select
    :options="options"
    @clear="(val) => value = ''"
    @select="(selected) => value = selected.value"
    :value="value"
  />
</template>

This will render the cascader-select with the given options, and allow the user to select any of them!

Props

Name	Type	Required	Default value
options	Array	✅
placeholder	String		'Please select...'
value	String	✅

options

Options passed down to the cascader-select. This prop is an array of objects. In each object the label and value keys are required while options, selectable and disabled keys are optional.

Let's see an example:

[
  {
    label: 'Frontend',
    value: 'Frontend',
    disabled: true,
    options: [
      { label: 'Vue', value: 'Vue' },
      { label: 'React', value: 'React' },
      { label: 'Svelte', value: 'Svelte' },
    ],
  },
  {
    label: 'Backend',
    value: 'Backend',
    disabled: true,
    options: [
      { label: 'Ruby on Rails', value: 'Ruby on Rails' },
      { label: 'NodeJS', value: 'NodeJS' },
      { label: 'Elixir', value: 'Elixir' },
    ],
  },
];

Events

Name	Parameters	When?
clear		Emitted when clicking on the cross icon
select	value	Emitted when an option is selected