Vue.js在添加新行时尝试递增数组值

Question

我在Vue.js中添加新行时尝试增加数组值,但是我收到错误:

您可能在组件呈现功能中有一个无限的更新循环.

JavaScript:

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

标记:

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

但是,如果我在add函数中对该值进行硬编码,则它第一次工作:

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

那么,我怎样才能让它变得动态呢？打字id: this.id++不起作用.

Answer 1

问题: - this.id未定义Vue不知道id,因为它不在组件数据中

所以你必须选择解决你的问题

• 像这样定义可变id

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

• 其他选项将解决问题,我更喜欢它是替换这行代码

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

  用这条线

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

  这将解决问题,这是完整的代码

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>