Friday, April 14, 2017

Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead

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

Advertisement