Vue js Bind dynamic id when adding text box dynamically on button click

Question

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.component('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 component 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.

varun agarwal · Accepted Answer · 2019-03-22 08:17:01Z

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 });

edited Mar 22, 2019 at 8:17

answered Mar 22, 2019 at 8:10

varun agarwal

1,5098 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Muhammad Talal Over a year ago

it would throw a warning: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.

Radu Diță · Accepted Answer · 2019-03-22 09:43:45Z

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 component and emit an input event each time the value changes. Making your custom component ready to receive an v-model

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

Bind each custom component 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 component.

Here's a working jsfiddle.

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

Varit J Patel · Accepted Answer · 2019-03-22 08:22:14Z

1

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!

answered Mar 22, 2019 at 8:22

Varit J Patel

3,5201 gold badge15 silver badges23 bronze badges

Collectives™ on Stack Overflow

Vue js Bind dynamic id when adding text box dynamically on button click

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related