vue.js - 如何更改被破坏的 v-dialog 组件的数据属性？

Question

我有内部表单的对话框组件。我想errorMessage在对话框关闭时删除数据属性。我不能这样做，因为 functiondestroyed()对它不起作用，它只是添加了 class display:none。

当我关闭对话框模式时，如何删除此错误消息？

<template>
  <v-dialog v-model="modal" max-width="800px">
    <template v-slot:activator="{ on }">
      <v-btn
        v-on="on"
        :disabled="disabled">
        open dialog
      </v-btn>
    </template>
    <v-card>
            <v-card-text>
              <v-alert class="mb-4" :value="true" v-if='errorMessage' type="error">{{errorMessage}}</v-alert>
            </v-card-text>
              <v-btn
                @click="downloadParameters"
                :loading="loading"
                class="success">
                Create excel
              </v-btn>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      modal: false,
      loading: false,
      errorMessage: null
    }
  },
  methods: {
    onCancel () {
      this.modal = false;
    },
    downloadParameters:async function(){
      const requestBody = {
        startDate: this.date,
        endDate: this.dateEnd
      };
      this.loading = false;
      this.errorMessage = null;
      try {
        this.loading = false;
        const res = await this.$store.dispatch(url,requestBody);
      } catch (e) {
        this.loading = false;
        this.errorMessage = 'Error message';
      }
    },
  },
  created() {
    this.errorMessage = '';
  }
}
</script>

标签： vue.jsvuetify.js

Answer 1

您可以为此使用Vue watcher

watch: {
  model(newVal) {
    if (!newVal) {
      this.errorMessage = null
    }
  }
}