如何组合 v-for 和 v-model 来编辑对象列表

Question

我想使用 Vue.js 编辑用户列表。每个用户都有一个名称和年龄。似乎v-for是处理列表的正确指令，v-model是将input的内容绑定到列表中的特定元素的正确指令。

所以我尝试像这样实现它：

new Vue({
  el: '#exercise',
  data: {
    users: [{
      name: "martin",
      age: 32
    }]
  },
  methods: {
    add_user: function() {
      this.users.push({
        name: "",
        age: ""
      });
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="exercise">
  <form id="list">
    <div></div>
    <div v-for="user in users">
      <input v-model="user.name">
      <input v-model="user.age">
      <button @click="add_user">+</button>
    </div>
  </form>
</div>

但是，一旦我单击按钮添加新用户，带有输入字段的新行只会显示几分之一秒，然后消失，只留下一个元素的用户列表。

拜托，你能告诉我我做错了什么吗？

Answer 1

原因是

<button> <form>当您单击按钮时，它会自动执行请求，因此它刷新或消失，因为它无法尝试使用<a>或使用<button @click.prevent="add_user" />

<div id="exercise">
  <form id="list">
    <div></div>
    <div v-for="user in users">
      <input v-model="user.name">
      <input v-model="user.age">
      <a @click="add_user">+</a> //solution
      <button @click.prevent="add_user">+</button> //another solution 
    </div>
  </form>
</div>

Answer 2

按钮正在提交表单，添加.prevent以停止操作：

new Vue({
  el: '#exercise',
  data: {
    users: [{
      name: "martin",
      age: 32
    }]
  },
  methods: {
    add_user () {
      this.users = [ ...this.users, {
        name: "",
        age: ""
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="exercise">
  <form id="list">
    <div v-for="(user, index) in users" :key="index">
      <input v-model="user.name" :key="`name-${index}`">
      <input v-model="user.age" :key="`age-${index}`">
    </div>
    <button @click.prevent="add_user">+</button>
  </form>
</div>

Answer 3

您需要设置按钮的 tye 类型，因为它位于表单内，它会回退以提交按钮。

此外，最好定义一个 ：key 来帮助 vue 在 v-for 上分辨一行与另一行之间的区别。

new Vue({
  el: '#exercise',
  data: {
    users: [{
      id:new Date().getTime(),
      name: "martin",
      age: 32
    }]
  },
  methods: {
    add_user: function() {
      this.users.push({
        id:new Date().getTime(),
        name: "",
        age: ""
      });
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="exercise">
  <form id="list">
    <div v-for="user in users" :key="user.id">
      <input v-model="user.name">
      <input v-model="user.age">
      <button type="button" @click="add_user">+</button>
    </div>
  </form>
</div>