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

Question

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

这是我的代码的一部分：

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>

UploadDialog.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>。以下步骤。

首先在uploadDialogKey: 1中创建data：

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