提交或关闭对话框后清除对话框表单的最佳方法

Question

下面我展示了父 vue，其中包含一个用于添加新记录（在本例中为用户）的对话框+表单。当表单被取消时，我希望清除输入字段，在本例中，我使用 v-model 将这些字段绑定到数据方法中的用户模板。

我想从父级控制这一点，因为这是对 API 的调用发生的地方，如果保存时出现错误，我想保留对话框表单并显示错误消息，否则我会清除对话框上的表单用于按钮单击。

看过不少例子，似乎都不太靠谱。看起来这应该很简单，但我还没有弄清楚。

父vue

...
<AddUser
    :visible="isAddDialogVisible"
    :error="error"
    v-on:onConfirmed="onAddUserConfirmed"
    v-on:onCancelled="onAddUserCancelled"
/>
...
onAddClick: function() {
    this.isAddDialogVisible = true;
}
...
onAddUserCancelled () {
    this.isAddDialogVisible = false;
}

对话框组件

data() {
  return {
    user: {}
  }
},
props: {
  error: {},
  visible: {
    type: Boolean,
    default: false,
  }
},
...
onCancel() {
  this.$emit("onCancelled");
}

Answer 1

也许最好和最短的方法是使用 v-if 来做到这一点：

<AddUser
    v-if="isAddDialogVisible"
    :visible="isAddDialogVisible"
    :error="error"
    v-on:onConfirmed="onAddUserConfirmed"
    v-on:onCancelled="onAddUserCancelled"
/>

当 false 时它将完全销毁对话框，当 true 时它将重新渲染它。