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

我想编辑使用Vue.js的用户列表。每个用户都有一个姓名和年龄。似乎

v-for

是处理列表的正确指令，

v-model

是将

输入的内容绑定到列表中特定元素的正确指令

所以我试着这样实现它：


newvue({
el:'练习'，
数据：{
用户：[{
姓名：“马丁”，
年龄:32
}]
},
方法：{
添加用户：函数（）{
这个是.users.push({
姓名：“，
年龄：“
});
}
}
});

+
原因是
和
当您单击按钮时，它会自动执行请求，因此其刷新或消失，因为它无法尝试使用
或使用


+//解决方案
+//另一个解决方案
按钮正在提交表单，添加
。阻止
停止操作：


newvue({
el:'练习'，
数据：{
用户：[{
姓名：“马丁”，
年龄:32
}]
},
方法：{
添加用户（）{
this.users=[…this.users{
姓名：“，
年龄：“
}]
}
}
});

+
您需要设置按钮的类型，因为它位于一个表单中，它会回退到submit按钮

此外，定义：键有助于vue区分v-for上一行与另一行之间的差异


newvue({
el:'练习'，
数据：{
用户：[{
id:new Date（）.getTime（），
姓名：“马丁”，
年龄:32
}]
},
方法：{
添加用户：函数（）{
这个是.users.push({
id:new Date（）.getTime（），
姓名：“，
年龄：“
});
}
}
});

+
True，但更好的解决方案是将
type=“button”
添加到
元素，因为从语义上讲，它不是链接，所以请使用
@click。防止
+
在语义上更正确。使用
.prevent
时，代码会显示“这是一个提交按钮（默认设置），但不提交任何内容。”对于特定类型，代码不会假装它是一个提交按钮。
<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>