While working with Vue and Bootstrap Tokenfield, I encountered an issue where v-model was not functioning as expected.
Let's say I have the following array:
index variant_options
1 aaa
2 sss
If I remove index 1, the result of index 1 should be "sss" but it still shows "aaa".
<div class="card" v-for="(variant, index) in form.variants" :key="index">
<div class="card-body"> <span class="float-right" style="cursor: pointer" @click="deleteVariant(index)">
X
</span>
<div class="row">
<div class="col-md-4">
<label for="weight">Variant Type {{ index + 1 }} </label>
<div class="input-group">
<input type="text" id="variant_type" class="form-control" v-model="
variant.variant_type
" @keyup="tokenField()" placeholder="Input variant type. E.g: Color" name="name" required autofocus /> </div>
</div>
<div class="col-md-8">
<label for="weight">Variant Options {{ index + 1 }}</label>
<div class="input-group">
<input type="text" id="variant_options" autofocus="true" v-model="
variant.variant_options
" @mouseover="
tokenField()
" placeholder="Input variant options. E.g: Blue, Brown," class="
form-control
variant_options
" /> </div>
data() {
return {
form: new Form({
variants: [
{
variant_type: '',
variant_options: '',
},
],
}),
};
},
methods: {
tokenField() {
$('.variant_options').tokenfield({
showAutocompleteOnFocus: true,
});
},
addVariant() {
if (this.form.variants.length <= 1) {
this.form.variants.push({
variant_type: '',
variant_options: '',
});
} else {
this.error = 'You can only add 2 type of varians';
$('#errMsg').show();
}
},
deleteVariant(index) {
this.form.variants.splice(index, 1);
$('#errMsg').hide();
},
}, // methods: