Create Advanced Select Element with Vue.js 3 and 2

Category: Vue.js Vue.js Form | June 29, 2021
Author: myENA
Official Page: Go to website
Last Update: June 29, 2021
License: MIT

Description:

Want to create an advanced select element with Vue.js for your project? Then, your search ends here. By using, advanced-select component you can render a ‘select’ with advanced interactions such as search, select/deselect etc.

How to use it?

Step 1: First, install the component with NPM.

npm install @myena/advanced-select

Step 2: Import the component as following.

import AdvancedSelect from 'advanced-select';

Step 3: Now, create HTML and Vue.js code.

<AdvancedSelect
  v-model="value"
  :options="options"
  :disabled="disabled"
  />
//Or as the default slot
<AdvancedSelect
  v-model="secondValue"
  :disabled="disabled"
  >
  <option value="1">Text</option>
  <option value="2">Text 2</option>
</AdvancedSelect>

//////////////// Vue.js code////////////////
export default {
  components: {
    AdvancedSelect,
  },
  data: () => ({
    options: [
      { value: 1, text: 'One' },
      { value: 2, text: 'Two' },
    ],
    value: null,
    secondValue: '1',
    disabled: false,
  }),
};