解决vue使用el-dialog中组件只有第一次执行mounted方法的问题(编辑成功后, 数据列表不刷新最新数据,只能刷新页面才能正常使用)

问题描述

打开编辑页面或模态框(Edit.vue), 编辑完成后, 数据修改成功, 跳转到列表页(Index.vue)后, 不刷新最新的数据, 只能刷新页面才能正常使用.
 
 

原因

vue使用el-dialog中组件,第二次打开没有执行组件内mounted的初始化方法，只能刷新页面才能正常使用
 
 

解决方法

editDialog是控制打开el-dialog(我这儿是编辑页面)弹窗的标志

 data() {
    return {
      formFields: {
        name: '',
        classifyid: ''
      },
      addDialog: false, // 添加的弹窗控制器
      editDialog: false, // 修改的弹窗控制器
      editData: null, // 要修改的数据
    }
  }

在el-dialog加上v-if="editDialog"，editDialog是控制打开el-dialog弹窗的标志

   <div>
      <el-dialog
        v-el-drag-dialog
        title="修改试卷信息"
        width="30%"
        v-if="editDialog"
        :visible.sync="editDialog">
        <edit
          ref="editRefs"
          :edit-data="editData"
          @closeEditModal="closeEditModal">
        </edit>
      </el-dialog>
   </div>