如何结合 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

按钮正在提交表单，添加.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 2

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

另外，最好定义一个 :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>

Answer 3

原因是<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>