I am able to add textbox dynamically on button click. My problem is i cant set dynamic id and value.

<div id="app">
        <div>
            <button class="button btn-primary" @click="addRow">Add row</button>
        </div>
        <div v-for="row in rows">
            <button-counter></button-counter>
        </div>
    </div>       
    <script>    
        Vueponent('button-counter', {
            template: '<input type="text" style="margin-top: 10px;" ><br>'
        })    
        var app = new Vue({
            el: "#app",
            data: {
                rows: [],
                count:0              
            },
            methods: {
                addRow: function () {
                    var txtCount=++this.count;
                    id='txt_'+txtCount;
                    this.rows.push({ title: "first", description: "textbox1" });
                }
            }
        });

    </script> 


  This is my code.

I have created on ponent for input and created one vue instance.while clicking add row button, it will add a new textbox.but i dont know to bind id and value for textbox.

I am able to add textbox dynamically on button click. My problem is i cant set dynamic id and value.

<div id="app">
        <div>
            <button class="button btn-primary" @click="addRow">Add row</button>
        </div>
        <div v-for="row in rows">
            <button-counter></button-counter>
        </div>
    </div>       
    <script>    
        Vue.ponent('button-counter', {
            template: '<input type="text" style="margin-top: 10px;" ><br>'
        })    
        var app = new Vue({
            el: "#app",
            data: {
                rows: [],
                count:0              
            },
            methods: {
                addRow: function () {
                    var txtCount=++this.count;
                    id='txt_'+txtCount;
                    this.rows.push({ title: "first", description: "textbox1" });
                }
            }
        });

    </script> 


  This is my code.

I have created on ponent for input and created one vue instance.while clicking add row button, it will add a new textbox.but i dont know to bind id and value for textbox.

• javascript
• vue.js
• vuejs2
• vue-ponent

3 Answers 3

You could pass the id in the rows array

<div v-for="row in rows" :id=row.id>
  <button-counter></button-counter>
</div>

And pass the id while adding the new row

this.rows.push({ title: "first", description: "textbox1", id });

You can add an id in your rows item and use that as an id. But I'm assuming you're doing this so you can retrieve the input value later on. There is a better way to do this.

Define a values object on your parent data object. Like this:

data: {
  rows: [],
  values: {},
  count:0              
},

Every time you add a new row add a reactive property to it:

addRow: function () {
  var txtCount=++this.count;
  id='txt_'+txtCount;
  this.rows.push({ title: "first", description: "textbox1"});
  this.$set(this.values, id, '')
},

Define a value prop on your custom ponent and emit an input event each time the value changes. Making your custom ponent ready to receive an v-model

Vue.ponent('button-counter', {
 props: ['value'],
 template: '<input type="text" @input="$emit(\'input\', 
  arguments[0].srcElement.value)" style="margin-top: 10px;" ><br>'
}) 

Bind each custom ponent to the correct v-model

<button-counter v-model='values[row.id]'></button-counter>

Now you have access to all the input values in values in the parent ponent.

Here's a working jsfiddle.

BTW: you're getting an error because your custom ponent has multiple roots. You need to either remove the br or add a wrapping element.

Well, At first in order to identify every input element, you need to add :key attr to v-for

and to bind value you can pass value and id as a prop while creating the input element and pass the value to the v-model of the input type so whenever it is created, you can have it inside the input.

Here is the JsFiddle

Hope this helps!