Am automatically generating input elements with vuejs onclick, however am unable to add the position value of my array to my name attribute every time i create the new input element. I am trying use this position value to uniquely identify each input element however keep getting the error below
- name="rows[@][name]": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="">, use <div :id="val">.
- name="rows[@][designation]": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="">, use <div :id="val">.
- name="rows[@][contact]": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="">, use <div :id="val">.
vuejs component code
<template>
<div>
<a @click.stop="addEmployee" style="cursor: pointer" class="green_text pull-right"><i class="fa fa-plus"></i></a>
<div v-for="(row, index) in rows">
<a @click.stop="removeEmployee" style="cursor: pointer" class="red_text"><i class="fa fa-minus-square"></i></a>
<div class="form-group">
<div class="col-sm-4">
<input name="rows[@][name]" class="form-control" placeholder="Enter Name here..">
</div>
<div class="col-sm-4">
<input name="rows[@][designation]" class="form-control" placeholder="Enter Designation here..">
</div>
<div class="col-sm-4">
<input name="rows[@][contact]" class="form-control" placeholder="Enter Contact here..">
</div>
</div><!--/form-group-->
</div>
</div>
</template>
<script>
export default{
data: function () {
return {
rows: [],
row:''
}
},
methods: {
addEmployee: function(){
this.rows.push(this.row);
},
removeEmployee: function(e){
this.rows.pop();
}
}
}
Any solutions on how i could solve this issue ?
via william jingo