You can add and remove chips with the vs-chips
component. For the main parameter, pass the items
property, which is an array representing each chip
<template>
<div class="op-block mb-4"> {{ "\{\{ chips \}\}" }} </div>
<vs-chips color="rgb(145, 32, 159)" placeholder="New Element" v-model="chips">
<vs-chip
:key="chip"
@click="remove(chip)"
v-for="chip in chips"
closable>
{{ "\{\{ chip \}\}" }}}
</vs-chip>
</vs-chips>
</template>
<script>
export default {
data(){
return {
chips:[
'Dribbble',
'GitHub',
'Behance',
'Vuejs',
'Vuexy',
],
}
},
methods: {
remove (item) {
this.chips.splice(this.chips.indexOf(item), 1)
}
}
}
</script>