Vue材质对话框-打开对话框时清除v-model

Question

我使用 vu-material 制作了一个对话框，一切正常，但我在对话框中有一个表单，每次打开对话框时我都想清理它，问题是如果我不更改页面，我的所有对话框内的 v-model 在关闭对话框之前保留我拥有的数据。 我尝试使用 created/mounted/updated 挂钩来清理我的 v-model，但是当我不更改页面时这些挂钩不会被触发。

这是我的代码的一部分：

Toolbarnav.vue：

<template>
...
<md-dialog md-open-from="#uploadBtn" ref="uploadDialog">
  <md-dialog-title>Upload file</md-dialog-title>
  <md-dialog-content>
    <upload-dialog></upload-dialog>
  </md-dialog-content>
  <md-dialog-actions class="md-align-center">
    <md-button class="md-primary" @click.native="closeUploadDialog()">Fermer</md-button>
  </md-dialog-actions>
</md-dialog>
...
</template>
<script>
...
openUploadDialog() {
    this.$refs.uploadDialog.open();
  },
  closeUploadDialog() {
    this.$refs.uploadDialog.close();
  },
...
</script>

上传对话框.vue：

<template>
...
<md-input-container>
    <label>Nom</label>
    <md-input id="nom" v-model="nom"></md-input>
</md-input-container> 
<md-input-container>
    <label>Prénom</label>
    <md-input id="prenom" v-model="prenom"></md-input>
</md-input-container> 
<md-input-container>
    <label>Email</label>
    <md-input id="email" v-model="email"></md-input>
</md-input-container> 
...
</template>
<script>
...
name: upload-dialog',
data() {
  return {
    files: [],
    nom: '',
    prenom: '',
    email: '',
  };
},
...
created() {
    this.files = [];
    this.nom = '';
    this.prenom = '';
    this.email = '';
},
</script>

有什么想法吗？ 谢谢

Answer 1

您可以使用其中一种打开/关闭事件：

• md-opened
• md-closed

并在那里进行清理，而不是在 created/mounted 生命周期事件中。

例子：

<md-dialog ... @md-opened="myOpenMethod" @md-closed="myCloseMethod">

new Vue({
  ...
  methods: {
    myOpenMethod() { console.log('opened'); },
    myCloseMethod() { console.log('closed'); }
  },
  ...
})

见demo CodePen here。

强制重新创建对话框组件

如果您只能更改Toolbarnav.vue，您可以使用:key 强制重新创建<upload-dialog>。下面的步骤。

首先在data中创建一个uploadDialogKey: 1：

data() {
  return {
    ...
    uploadDialogKey: 1
  }
},

在对话框的声明中添加key：

<upload-dialog :key="uploadDialogKey"></upload-dialog>

现在每次更改 uploadDialogKey 属性时，Vue 都会重新创建组件。

由于您要在openUploadDialog() 上重新创建对话框，请将其更改为：

openUploadDialog() {
  this.uploadDialogKey++;              // <=== added this line
  this.$refs.uploadDialog.open();
},

Demo CodePen of this solution here.