0

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

这是我的代码的一部分：

工具栏导航.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>

有什么想法吗？谢谢

4

1 回答 1

5

您可以使用打开/关闭事件之一：

  • 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'); }
  },
  ...
})

在此处查看演示 CodePen。


强制重新创建对话框组件

如果只能改变Toolbarnav.vue，就可以:key用力来娱乐了<upload-dialog>。下面的步骤。

首先创建一个uploadDialogKey: 1in 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在这里。

于 2018-02-28T12:01:28.123 回答