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

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"
/>

如果为假，它将完全破坏对话框，如果为真，它将重新渲染。