vue 页面卡死,点击无反应的问题及解决

 更新时间:2022年10月11日 10:32:20   作者:落叶无情也算有情  
这篇文章主要介绍了vue 页面卡死,点击无反应的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue 页面卡死,点击无反应

我在结合element做表单的时候,进入编辑页时,点击切换不生效,但是value值已改变,就是view视图层无反应,感觉页面卡死的样子

我在切换按钮上,绑定的change事件,执行 this.$forceUpdate()强制刷新视图层

vue 项目页面卡死原因排查

问题描述

点击后台管理某一菜单发现直接卡死,没有其他报错信息,整个网页鼠标变为手指状态不能进行任何操作

问题排查

首先是通过注释代码发现问题是出在以下代码中

    <basic-container>
      <h4>教师指标数据</h4>
      <avue-crud ref="crud"
                 :data="tableData"
                 :table-loading="tableLoading"
                 :option="tableOption"
                 @refresh-change="refreshChange"
                 @search-change="searchChange">
        <template slot-scope="scope"
                  slot="menu">

          <el-button type="text"
                     icon="el-icon-view"
                     size="small"
                     @click="handleView(scope.row,scope.index)">查看
          </el-button>
        </template>
      </avue-crud>
    </basic-container>

查看日志输出

锁定到问题是数据展示的data 需要array 但是却拿到了Object

将数据展示方式tableData改为 table:[]数组类型进行展示即可

data:{
return :{
        tableData: []
]
}      
getList() {
        this.tableLoading = true;
        this.tableData=[];
        fetchList(this.listQuery).then(response => {
          console.log("------------------"+response.data.data)
          this.tableData.push(response.data.data) ;
          this.tableLoading = false
        })
      },

小结

这里有几个问题

一个是avue 版本兼容的问题 貌似旧版本会兼容这种情况不会出现卡死的问题

大佬修改框架后出现的这个问题

另一个是返回值规范 如果使用表格 最好都返回list数组 不要返回单object类型导致出现类似

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue组件间的双向绑定示例解析

    Vue组件间的双向绑定示例解析

    这篇文章主要介绍了Vue组件间的双向绑定,我们都知道当父组件改变了某个值后,如果这个值传给了子组件,那么子组件也会自动跟着改变,但是这是单向的,使用v-bind的方式,即子组件可以使用父组件的值,但是不能改变这个值
    2023-03-03
  • 如何在vuejs项目中使用md5加密密码的实现

    如何在vuejs项目中使用md5加密密码的实现

    本文主要介绍了如何在vuejs项目中使用md5加密密码的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • Vue element-UI el-select循环选中的问题

    Vue element-UI el-select循环选中的问题

    这篇文章主要介绍了Vue element-UI el-select循环选中的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue中对iframe实现keep alive无刷新的方法

    Vue中对iframe实现keep alive无刷新的方法

    这篇文章主要介绍了Vue中对iframe实现keep alive无刷新的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • 详解Vue 中 extend 、component 、mixins 、extends 的区别

    详解Vue 中 extend 、component 、mixins 、extends 的区别

    这篇文章主要介绍了Vue 中 extend 、component 、mixins 、extends 的区别,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-12-12
  • vue计算属性及函数的选择

    vue计算属性及函数的选择

    这篇文章主要介绍了vue计算属性及函数的选择,文章围绕主题的相关资料展开详细介绍,需要的小伙伴可以参考一下
    2022-05-05
  • vue组件vue-treeselect箭头和叉图标变大问题及解决

    vue组件vue-treeselect箭头和叉图标变大问题及解决

    这篇文章主要介绍了vue组件vue-treeselect箭头和叉图标变大问题及解决方案,具有很好的参考价值,希望对大家有所帮助。
    2022-07-07
  • vue+echarts绘制省份地图并添加自定义标注方式

    vue+echarts绘制省份地图并添加自定义标注方式

    这篇文章主要介绍了vue+echarts绘制省份地图并添加自定义标注方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue自定义filters过滤器

    vue自定义filters过滤器

    这篇文章主要介绍了vue自定义filters过滤器的相关知识,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2018-04-04
  • vue组件与复用详解

    vue组件与复用详解

    组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。这篇文章主要介绍了vue组件与复用,需要的朋友可以参考下
    2018-04-04

最新评论