Search is available by default since the searchable prop is set to true by default. Now when we select a value, we select the whole object, and value is set to the object selected when we pick an item. We display the values in the name properties because we set label to name.
If we want to display items to the user and keep the values different from what’s displayed, then we need to have an array of objects for options. Also note that we added the styles from the package with the style tag. The options prop is set to options, which has an array of strings.īecause of this, the value displayed to the user will be the same as the selected value we can see that from the element below the dropdown. We have the multiselect component with v-model to bind to the value state. The Multiselect component is registered to the component. Import Multiselect from 'vue-multiselect' We can also add the library via script tags and add the CSS that’s associated with the package:
To get started, we can install Vue-Multiselect by running: npm install vue-multiselect -save In this article, we’ll look at how the Vue-Multiselect library can help improve our dropdown menus. Therefore, if we’re using Vue to build our apps, we can use some components to help make our lives easier. Creating dropdown menus is always tough, especially if we need to apply custom styling to it - the select element is very limited in what it can do.
