I am trying to increment an array value when I add a new row in Vue.js, but I get the error:

You may have an infinite update loop in a ponent render function.

The JavaScript:

new Vue({
  el: '#app',
  data: () => ({
    inputs: [{
      id: 0,
      username: ''
    }],
  }),
  methods: {
    add() {
      this.inputs.push({ id: this.id++, username: '' });
    }
  }
});

The markup:

<div id="app">
  <div v-for="input in inputs">
    <input :key="input.id" :name="'username_' + input.id" type="text" v- v-model="input.username" placeholder="username">
  </div>
  <button @click="add">Add</button>
</div>

However, if I hardcode the value in the add function it works the first time:

add() {
  this.inputs.push({ id: 1, username: '' });
}

So, how can I make it dynamic? Typing id: this.id++ does not work.

I am trying to increment an array value when I add a new row in Vue.js, but I get the error:

You may have an infinite update loop in a ponent render function.

The JavaScript:

new Vue({
  el: '#app',
  data: () => ({
    inputs: [{
      id: 0,
      username: ''
    }],
  }),
  methods: {
    add() {
      this.inputs.push({ id: this.id++, username: '' });
    }
  }
});

The markup:

<div id="app">
  <div v-for="input in inputs">
    <input :key="input.id" :name="'username_' + input.id" type="text" v- v-model="input.username" placeholder="username">
  </div>
  <button @click="add">Add</button>
</div>

However, if I hardcode the value in the add function it works the first time:

add() {
  this.inputs.push({ id: 1, username: '' });
}

So, how can I make it dynamic? Typing id: this.id++ does not work.

• javascript
• node.js
• ecmascript-6
• vue.js

2 Answers 2

The problem :- this.id is undefined Vue doesn't know id because its not in the ponent data

so you have to options to solve your problem

• define the varaible id like this

  data(){
       id:0,inputs:[]
   }
  

• other option which will solve the problem and I prefer it is to replace this line of code

      this.inputs.push({ id: this.id++, username: '' });
  

  with this line

    this.inputs.push({ id: this.inputs.length, username: '' });
  

  this will solve the problem and here is the pelete code

new Vue({
    el: '#app',
  data: () => ({
    inputs: [{
   id: 0,
   username: ''
}],
  }),
  methods: {
    add () {
      console.log(this.inputs.length);
      this.inputs.push({ id: this.inputs.length, username: '' });
    }
  }
});

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.13/vue.min.js"></script>

  <div id="app">
    <div v-for="input in inputs">
      <input :key="input.id" :name="'username_' + input.id" type="text" v- v-model="input.username" placeholder="username">
    </div>
    <button @click="add">Add</button>
  </div>

Even more simply:

Using the index. Work for me.

Enjoy!

new Vue({
    el: '#app',
  data: () => ({
    inputs: [{
   username: ''
}],
  }),
  methods: {
    add () {
      this.inputs.push({ username: '' });
    }
  }
});

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.13/vue.min.js"></script>

  <div id="app">
    <div v-for="(input, index) in inputs">
      <input :name="'username_' + index" type="text" v-model="input.username" placeholder="username">
    </div>
    <button @click="add">Add</button>
  </div>