将v模型绑定到模态以进行编辑和创建

Question

我有一个姓名列表，可以编辑每个姓名。我也可以在列表中添加新名称。对于添加和编辑名称，我都使用相同的模式。创建模态时为空，而编辑模态时，将填充我单击的名称值。我现在的问题是我没有适当地绑定我的模态，所以我可以在创建时有一个空的模态，或者在编辑时有一个填充的模态。

我有一张桌子，这是桌子的主体：

 button(data-toggle="modal" data-target"#userInfoModal") New Name

---

tbody
  tr(v-for='name in names')
    td {{name.firstName}}
    td {{name.lastName}}
    td
      button(data-toggle="modal", data-target="#userInfoModal") Edit

#userInfoModal
  ...
  label First Name
  input(type="text", v-model='user.firstName')
  label Last Name
  input(type="text", v-model='user.lastName')
  ...
  save and cancel buttons of modal

我该怎么做才能正确绑定每个点击值？