Vue Js Chips on Input Text Field: One way to create “chips” (small blocks of content) on an input field using Vue.js is to create a custom component that listens for changes to the input field and then splits the input into separate chips. The chips can then be displayed and manipulated separately. To create this functionality, you would need to use Vue‘s directives, such as v-model, v-on, and v-for, along with some JavaScript for splitting the input into separate chips and manipulating them.
Vue Js Chips Example
Vue.js chips are small blocks of text or images that can be used for various purposes, such as tagging, selection, or input suggestions. They are often used in combination with input fields or forms. An example of a Vue.js chip might be a list of tags that a user can select from and add to a post or article. The chip component would handle displaying the tag, allowing the user to select it, and adding it to the list of selected tags.
How to Create Chip input by using HTML,CSS,JS in Vue Js?
You can create a chip input component in Vue.js using a combination of HTML, CSS, and JavaScript. One approach would be to use an input element with a v-model binding to keep track of the input value and a list element to display the chips. You could then use event listeners and methods to add and remove chips from the list. Additionally, you could add styles to the list element and the chips themselves to provide a visually pleasing experience
Vue Js chips on Input Text Field | Example
<div id="app">
<div class="chips-container">
<div class='chips-inner-container'>
<div v-for="(chip, index) in chips" :key="index" class="chip"> {{ chip }}</div>
<span @click="removeChip" v-show="show" class="material-icons close">close</span>
</div>
<div class="input-group">
<label class="input-underlined">
<input v-model="inputValue" @keydown.enter="addChip" type="text">
<span class="input-label">Enter Tags</span>
</label>
</div>
</div>
</div>
<script type="module">
const app = new Vue({
el: "#app",
data() {
return {
inputValue: '',
chips: [],
show: false
}
},
methods: {
addChip() {
if (this.inputValue.length) {
this.chips.push(this.inputValue)
this.inputValue = ''
this.show = true
}
},
removeChip() {
this.chips.splice(0)
this.show = false
},
}
});
</script>
Output of Vue Tags Input Box
Vue Js Chips Input add, remove, and manipulate small pieces of information
Here’s an example of a basic chip component that allows users to add and remove chips by inputting text into an input field:
In this example, the inputValue data property is bound to the input field using the v-model directive. The addChip method is called when the user presses the enter key while the input field is focused, and it pushes the current value of inputValue into the chips array. The chipRemove method takes an index as an argument, and it uses it to remove the corresponding chip from the chips array using the splice method.and the allchipsRemove method to remove the chips array value and backspace Method of deletion: remove the last item from the chips array.
Vue Js Chips Input | Add Chip | Remove Chip Example
<div id="app">
<div class="chips-container">
<div class="chips-inner-container">
<div v-for="(chip, index) in chips" :key="index" class="chip">
{{ chip }}
<div class="v-chip-close" @click="chipRemove(index)">
<span class="material-icons">close</span>
</div>
</div>
<input v-model="inputValue" @keydown.enter="addChip" @keydown.delete="backspaceDelete" type="text"
placeholder="Enter Tags">
</div>
<div class="all-chip-close">
<span @click="allChipsRemove" v-show="show" class="material-icons ">close</span>
</div>
</div>
</div>
<script type="module">
const app = new Vue({
el: "#app",
data() {
return {
inputValue: '',
chips: [],
show: false,
set: true
}
},
methods: {
addChip() {
if (this.inputValue.length) {
((this.set && this.chips.indexOf(this.inputValue) === -1) || !this.set) && this.chips.push(this.inputValue);
this.inputValue = ''
this.show = true
}
},
backspaceDelete({ which }) {
which == 8 && this.inputValue === '' && this.chips.splice(this.chips.length - 1);
},
chipRemove(index) {
this.chips.splice(index, 1)
},
allChipsRemove() {
this.chips.splice(0)
this.show = false
},
}
});
</script>
Output of Tags Input Box
