zoukankan      html  css  js  c++  java
  • Cannot read property 'resetFields' of undefined 问题及引申

    问题描述: 使用element开发我的后台系统,编辑和新增使用了同一个弹出框<el-dialog><el-form></el-form></el-dialog>
    绑定了数据data里的commentForm对象
    为了在新增弹出框清空表单, 使用了this.$refs[formName].resetFields()
    每次第一次点击新增显示弹出框,都会报错
    "[Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'resetFields' of undefined""

    问题原因: mouted加载table数据以后,隐藏的弹出框并没有编译渲染进dom里面。

    所以@click="dialogFormVisible = true;resetForm('dlgForm')"click弹出的时候$refs并没有获取到dom元素导致 'resetFields' of undefined

    解决方法:

    1、($nextTick dom下一次更新之后)

                resetForm(formName) {
                    this.$nextTick(()=>{
                        this.$refs[formName].resetFields();
                    })                
                },
    

    2、(如果是第一次就点击新增就没必要reset, 根据元素undefined判断)

                    if (this.$refs[formName] !== undefined) {
                        this.$refs[formName].resetFields();
                    }
    

    注意事项:对DOM一系列的js操作最好都要放进Vue.nextTick()的回调函数中

  • 相关阅读:
    LeetCode 79. 单词搜索
    LeetCode 1143. 最长公共子序列
    LeetCode 55. 跳跃游戏
    LeetCode 48. 旋转图像
    LeetCode 93. 复原 IP 地址
    LeetCode 456. 132模式
    LeetCode 341. 扁平化嵌套列表迭代器
    LeetCode 73. 矩阵置零
    LeetCode 47. 全排列 II
    LeetCode 46. 全排列
  • 原文地址:https://www.cnblogs.com/papi/p/9268801.html
Copyright © 2011-2022 走看看