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

我用vu材料制作了一个对话框，一切正常，但每次打开对话框时我都要清理对话框中的一个表单，问题是如果我不更改页面，对话框中的所有v型模型都会保留关闭对话框之前的数据。 我尝试使用创建/安装/更新的钩子来清理我的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>

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

...
上传文件
费尔默
...
...
openUploadDialog（）{
这是.$refs.uploadDialog.open（）；
},
closeUploadDialog（）{
这是.$refs.uploadDialog.close（）；
},
...

UploadDialog.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>

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

...
笔名
名词
电子邮件
...
...
名称：上载对话框“，
数据（）{
返回{
文件：[]，
名称：''，
prenom:“，
电子邮件：“”，
};
},
...
创建（）{
this.files=[]；
this.nom=''；
this.prenom=''；
this.email=''；
},

有什么办法吗？

---

谢谢

您可以使用其中一个开始/结束活动：

• md已打开

• md关闭

然后在那里进行清洁，而不是在

创建的
/
装载的
生命周期事件中进行清洁

例如：

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

看



强制重新创建对话框组件
如果只能更改
工具栏导航.vue
，则可以使用
：键
强制重新创建
。步骤如下

首先在
数据中创建
上传对话框键：1
：

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

将
键
添加到对话框的声明中：

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

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


md已打开
md关闭

然后在那里进行清洁，而不是在
创建的
/
装载的
生命周期事件中进行清洁

例如：

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

看



强制重新创建对话框组件
如果只能更改
工具栏导航.vue
，则可以使用
：键
强制重新创建
。步骤如下

首先在
数据中创建
上传对话框键：1
：

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

将
键
添加到对话框的声明中：

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

.
来自Vue of icial docs（）关于ref注册时间的一个重要注意事项：由于ref本身是通过渲染功能创建的，因此在初始渲染时无法>访问它们-它们还不存在$ref也是非反应性的，因此不应尝试在模板中使用它进行数据绑定。来自Vue Office docs（）关于ref注册时间的一个重要注意事项：由于ref本身是通过渲染函数创建的，因此在初始渲染时无法>访问它们-它们还不存在$refs也是非反应性的，因此您不应该尝试在模板中使用它进行数据绑定。谢谢！但是我的md dialog声明在Toolbarnav.vue内，所以我无法更新UploadFileDialog.vue DataInboard Nav.vue我无法更新UploadFileDialog.vue中的任何内容（我认为），这就是为什么我尝试使用不同的钩子在UploadFileDialog.vue内进行更新的原因，但这只有在我更改页面时才有效谢谢！但是我的md dialog声明在Toolbarnav.vue中，所以我无法更新UploadFileDialog.vue DataInboard Nav.vue中的UploadFileDialog.vue我想我无法更新UploadFileDialog.vue中的任何内容，这就是为什么我尝试使用不同的钩子在UploadFileDialog.vue中进行更新，但这只有在我更改页面时才有效