Vue material 对话框 - 打开对话框时清除 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>

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

您可以使用 opening/closing 事件之一：

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.

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

Vue material dialog - Clear v-model when open dialog

vuejs2

vue-material

强制重新创建对话框组件