vue.js - 如何结合 v-for 和 v-model 来编辑对象列表？

Question

我想使用 Vue.js 编辑用户列表。每个用户都有姓名和年龄。似乎 v-for 是处理列表的正确指令，而 v-model 是绑定(bind) 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>