表单新增一条数据和编辑数据弹窗问题

最近在写项目的时候，遇到一个问题，感觉场景挺常见的，就把它记录下来吧~

如上图所示，点击新建数据和编辑，用的时同一个弹出框，这时候就会出现一个问题，当弹出框弹出时，要判断点击的是新增还是编辑，如果是新建，则数据为空(placeholder)，如果是编辑，表单中要显示这条数据的信息。

这在这里我用来是通过type来判断是新增还是编辑的，此时出现了一个问题，当我先点新增，再点编辑，之后再点新增是正常的，但是当我先点编辑，再点新增的时候，表单会显示数据内容，这个问题困扰了我好一阵。

之后了解到，关闭弹窗时调用表单的resetFields()方法，是对该表单项进行重置，将其值重置为初始值并移除校验结果（自己理解是当组件(这里就是弹窗)第一次被调用，resetFields()方法的初始值会生成），所以当我们先点新增，关闭弹窗表单resetFields()方法会重置到我们在表单绑定的初始值（我的表单初始值都为空)，再点编辑之后关闭弹窗还是会空值，不会出现问题。但当我们先点编辑时，resetFields()方法的初始值会是编辑的这条数据，所以再点新增会出现这条数据的内容。

解决办法是这样的：

Vue提供了一个$nextTick的方法，他会在DOM更新完之后（这时候resetFields()方法已经初始化）才绑定这条数据的值，当点新增时，就还是原来的空值了~