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

Question

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

我想从父级控制它，因为这是调用 API 的地方，如果保存时出现错误，我想保留对话框并显示错误消息，否则我会只需清除对话框中的表单即可单击按钮。

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

父 View

...
<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 时重新呈现它。