Vue Js Select Multiple Chips
Vue Js Multiselect chips/Add Remove Chips from Dropdown: In Vue.js, a "chip" is a small component that is used to represent a piece of information, such as a tag, contact, or keyword. It is typically used in conjunction with other UI elements, such as a text input field, to allow users to input and select multiple items. The "multiple select chips" feature allows a user to select multiple items from a list using chip-shaped selections. This can be useful for things like tagging systems or multi-select dropdown menus. The implementation of this feature typically involves using a combination of Vue directives and native javascript events to handle the selection and display of the selected items. Here in this example, we will explain how to select multiple items in chip format.
Thanks for your feedback!
Your contributions will help us to improve service.
This example uses a template with a div
element that contains a span
element for each chip in the chips
data array and a selected option to add new chips. The v-for
directive is used to loop through the chips
array and display each chip as a span
element, and the v-model
directive is used to bind the value of the select element to the newChip
data property. When the user selects options from the dropdown, the addChip
method is called, which pushes the current value of newChip
into the chips
array. Additionally, an "i" element is added for each chip, which is used to remove the chip when the user clicks on the cross icon.
Output of above example