最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Vue.js trying to increment array value when adding new row - Stack Overflow

programmeradmin2浏览0评论

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.

Share Improve this question edited Dec 29, 2017 at 15:21 Ateş Göral 140k27 gold badges141 silver badges191 bronze badges asked Dec 29, 2017 at 14:56 user2722667user2722667 8,66114 gold badges60 silver badges103 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 8

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>

发布评论

评论列表(0)

  1. 暂无评论