NodeJS [SOLVED]: Vue.js trying to increment array value when adding new row

NodeJS [SOLVED]: Vue.js trying to increment array value when adding new row

Home Forums Scripting NodeJS Tutorials NodeJS [SOLVED]: Vue.js trying to increment array value when adding new row

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #245851

    Cloudy Point
    Keymaster

    QuestionQuestion

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

    #245852

    Cloudy Point
    Keymaster

    Accepted AnswerAnswer

    The problem :- this.id is undefined Vue doesn’t know id because its not in the component 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 compelete 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.com/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>

    Source: https://stackoverflow.com/questions/48024428/vue-js-trying-to-increment-array-value-when-adding-new-row
    Author: mostafa tourad
    Creative Commons License
    This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.