精华内容
下载资源
问答
  • Error in mounted hook: "TypeError: right-hand side of ‘in’ should be an object, got undefined"报错解决 今天在做一个Echarts玫瑰图组件时遇到了这样的报错,意思是mounted部分报错‘in’的右边应该是个对象...

    Error in mounted hook: "TypeError: right-hand side of ‘in’ should be an object, got undefined"报错解决

    今天在做一个Echarts玫瑰图组件时遇到了这样的报错,意思是mounted部分报错‘in’的右边应该是个对象,找了半天原因,没有格式错误,最后发现是在setOption部分出错了,在此记录,供以后参考。
    以下是具体代码:

    <template>
        <div id="myecharts" style="height: 100%;"></div>
    </template>
    
    <script>
        import echarts from "echarts";
    
        export default {
          name: "myecharts",
          data(){
            return{
              data: [
                {
                  value: 3,
                  name: 'a',
                },
                {
                  value: 2,
                  name: 'b',
                },
                {
                  value: 3,
                  name: 'c',
                },
                {
                  value: 4,
                  name: 'd',
                },
                {
                  value: 5,
                  name: 'e',
                }
              ],
    
            }
          },//data
          mounted() {
            const myEcharts = echarts.init(document.getElementById('myecharts'));
            //玫瑰图数据
            const options = {
              color: ['rgba(50,123,250,1)','rgba(244,201,7,1)', 'rgba(23,216,161,1)','rgba(122,60,235,1)','rgba(15,197,243,1)'],
              legend: {
                orient: 'vertical',
                  itemWidth: 12,// 标志图形的长度
                  itemHeight: 8,// 标志图形的宽度
                  top: "center",
                  right: "15%",
                  data: ['a', 'b', 'c', 'd', 'e'],
                  textStyle: {
                  color: "#fff",
                    fontSize: 10
                }
              },
              tooltip: {
                trigger: 'item',
                formatter: '{b} : {c} ({d}%)'
              },
              series: {
                  name: '不安全行为',
                  type: 'pie',
                  roseType: 'radius',
                  radius:['40%', '90%'],
                  center: ['30%', '55%'],
                  data: this.data,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  },
                  label: {
                    normal: {
                      show: true,
                      position: 'outside',
                      formatter: '{d}%',//模板变量有 {a}、{b}、{c}、{d},分别表示系列名,数据名,数据值,百分比。{d}数据会根据value值计算百分比
                      textStyle : {
                        align : 'center',
                        baseline : 'middle',
                        fontFamily : '微软雅黑',
                        fontSize:10,
                        // fontWeight : 'bolder'
                      }
                    },
                  },
                  labelLine: {
                    length: 1,
                    length2: 20,
                    smooth: false
                  },
                }
            };
            myEcharts.setOption(options, true);
            // 错误写法 myEcharts.setOption(this.options, true);
           
          methods: {},
        }
    </script>
    
    <style scoped>
    
    </style>
    
    

    myEcharts.setOption(this.options, true);这种写法是options写在data中时的写法,当options写在mounted中时调用不应该加this的。
    **

    Bingo

    **在这里插入图片描述

    展开全文
  • 因为项目需要表格实现拖拽排序效果,最开始选用了sortable.js 我的列表视图有两种方式,一种是表格方式的,一种是图示...感觉应该是v-if的原因,el-table这时候是没有加载的,但是我在mounted函数里调用了sortable...

    在这里插入图片描述因为项目需要表格实现拖拽排序效果,最开始选用了sortable.js
    我的列表视图有两种方式,一种是表格方式的,一种是图示视图。
    我用的v-if来控制显示表格和视图的显示方式。
    一开始的时候,我默认显示的是表格形式,是没有这个报错的
    后来我把初始化的视图改成了图示的,
    就报了上图的错…

    感觉应该是v-if的原因,el-table这时候是没有加载的,但是我在mounted函数里调用了sortable.js的方法
    在这里插入图片描述
    所以,只要在el-table表格加载出来了,再使用sortable就不会报错了
    在这里插入图片描述
    把mounted里的rowDrop()去掉,
    改成切换成table视图时才调用rowDrop()就没有报错了

    展开全文
  • redux-logger.js:1 Uncaught Could not find router reducer in state tree, it must be mounted under “router” 跳转页面时,之前时正常的,后来自己加了connect-react-router库导致报错 调查后发现,依赖的...

    redux-logger.js:1 Uncaught Could not find router reducer in state tree, it must be mounted under “router”
    跳转页面时,之前时正常的,后来自己加了connect-react-router库导致报错

    在这里插入图片描述
    在这里插入图片描述
    调查后发现,依赖的history库的版本是5.0.0,而connent-ract-router中依赖的history的版本是4.7.0,这里可能导致了版本不兼容。

    把本地依赖的history的版本退回到4.7.0后正常
    在这里插入图片描述

    展开全文
  • 今天使用iview画页面时遇到一个很简单但是搞了很久的bug,加了一个控件 <user-select style="width:200px" @on-change="handleSelect" ...然后神奇的地方出现了,不管怎么该,一直报Error in mounted hook:

    今天使用iview画页面时遇到一个很简单但是搞了很久的bug,加了一个控件

    <user-select
     style="width:200px"
     @on-change="handleSelect"
     ref="user"
     v-model="form.userCode">
    </user-select>

    然后使用$refs调用组件属性

    this.$refs.user.initData();

    然后神奇的地方出现了,不管怎么该,一直报Error in mounted hook: "TypeError: Cannot read property 'initData' of undefined"错误,这个方法之前一直用的呀,各种猜想为啥在这里不行了。

    最后发现一件神奇的事情,这个组件换个位置就可以正常工作了,然后放回原处就不行了,然后我想,难道这是iview的bug,某两个控件不能紧跟着放在一起?然后又转过头来想,不可能呀,整个vue生态都这么成熟了,不应该会存在这么低级的错误呀!

    然后突然发现,这个控件是所在的位置多了一个v-if判断,难道是因为渲染的顺序导致的?

    <Row :gutter="32" v-if="type=='2'">
     <Col span="12>
        <FormItem label="用户选择" prop="userCode" >
            <user-select
              style="width:200px"
              @on-change="handleSelect"
              ref="user"
              v-model="form.userCode">
            </user-select>
        <FormItem>
     </Col>
    <Row>

    突然感觉像发现新大陆一样欣喜若狂,果然删掉了v-if属性之后能够正常工作了。

    然后想应该是vue的加载渲染机制有关,优先渲染html代码,此时js代码还没有执行,所以动态属性还没有值,因此被v-if包裹的代码块没有被封装,此时执行js初始化代码的时候,调ref组件自然是undefined的。

    大胆这么才想后,继续实验猜想,如果真像想的那样,那按照v-if和v-show的区别,v-show会在加载html的时候加载完整代码,只是不展示,那这样的话,执行js代码的时候,组件应该是存在的。所以尝试将v-if改成v-show,果然代码执行成功了。

    另一起再回顾一下v-if和v-show的区别:

    • 手段:v-if是通过控制dom节点的存在与否来控制元素的显隐;v-show是通过设置DOM元素的display样式,block为显示,none为隐藏;
    • 编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换;
    • 编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载); v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素保留;
    • 性能消耗:v-if有更高的切换消耗;v-show有更高的初始渲染消耗;

    基于以上区别,因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

    展开全文
  • Vue报错Error in mounted hook: “far

    千次阅读 2020-10-23 14:06:26
    经过排查,发现原因是组件里面 有标签的ID值重复了 比如 A组件引入使用B组件,B组件又引入使用C组件,而A组件里面有个 div 标签的 id 是 map ,而C组件里面也有一个 div 标签的 id 是 map 。就会出现这个错误。...
  • 记录bug,以便后续遇到同样问题。 错误提示是: 产生原因: ...async mounted() { document.documentElement.scrollTop = 0; let data = (await request().data; if (data) { this.success = true }
  • linux报错Error: /proc must be mounted

    千次阅读 2019-02-19 09:30:16
    情景再现 free -m命令报错,报错信息如下 分析 也许是以root身份运行的buggy脚本,改变了它的权限/proc。检查一下:ls -ld /proc 解决 sudo chmod 755 /proc
  • 在使用better-scroll的时候遇到过的错误之一 [BScroll warn]: Can not resolve the ...[Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘children’ of undefined” 明明已经了DOM节点,为...
  • 文章原创,转载请注明链接   昨天刚装了UBUNTU 9.10,...one or more of the mounts listes in /etc/fstab cannot yet be mounted: swap:waiting for /dev/mapper/cryptswap1  A maintenance shell will be star
  • 今天需要装一台内部Ubuntu服务器,从网站下载了Ubuntu 14.04的server版,搞到U盘中,在电脑上安装居然报“Your installation CD-couldn't be mounted. This probably means that the CD-ROM was not in the drive. ...
  • nfs disk can't be mounted automatically
  • 出现这个报错是你组件里面定义了空的钩子函数,没有在里面写代码,把这个空的钩子函数删掉就可以
  • 解决方法: 将下面的代码: import echarts from 'echarts/lib/echarts' 改为: import echarts from 'echarts' 就好啦。
  • 你会发现出现这个错误了,但是并没有影响到项目的运行,(推下眼镜),作为一个经常假装认真的我,觉得还是解决掉的好,避免为以后留下隐患。 直接看这个错误你会发现,没有任何的头绪,那么就从他给的报错下的提示...
  • 出现的原因一般时钩子函数写法有问题或者是为空,如 修改mounted钩子函数就正常了
  • Error in mounted hook: "TypeError: Cannot read property 'get' of undefined 分析 . 提示Vue.$http.get 是不存在;打印之后果然不存在, 所以问题就是Vue.上面了 . 在actions里面打印 console.log(Vue); ...
  • ORA-15003 DISKGROUP "DATA" ALREADY MOUNTED IN ANOTHER LOCK NAME SPACE +ERROR: PST FOUND ANOTHER HEARTBEAT (GRP ...
  • 最新文章:Virson‘s Blog 安装GI,在执行root.sh时报错: Disk Group CRSDG creation failed with the following message: ORA-15018: diskgroup cannot be created ... cannot be mounted ORA-150...
  • isMounted is an Antipattern

    2017-01-16 19:02:40
    https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html 主题 ECMAScript ...As we move closer to officially deprecating isMounted, it's worth understanding why the function is
  • ORA-10456: cannot open standby database; media recovery session may be in progress Once while starting my standby database i found that database is not opening in normal mode. It throws the
  • ORA-15003: diskgroup "XXXX" already mounted in another lock name space 原因是在两个节点上同时执行了root.sh。   解决办法 (as root): cd $ORACLE_HOME/crs/install ./rootcrs.pl -deconfig...
  • Accommodation and convergence play critical roles in the natural viewing of three-dimensional (3D) scenes, and these must be accurately matched to avoid visual fatigue. However, conventional ...
  • ORA-16433: The database must be opened in read/write mode. SQL> shutdown immediate ORA-01109: database not open Database dismounted. ORACLE instance shut down. SQL> ...
  • I want to run a docker image in machine A, and mount a directory DIR_B in Machine B. try I mkdir a directory DIR_A in machine A, and used sshfs to mount the dir in machine B: mkdir -p ...
  • has been mounted 20 times without being checked, check forced 关闭开机文件系统自检或变更检查频率 http://rocolex.blog.163.com/blog/static/6844641020119110413861/ 关闭自检:编辑/etc/fstab文件...
  • 问题是这样的 vue我建了个vue组件  代码如下 export default { ... mounted:function(){ var m=this; }, methods:{ } } 什么都还没做 莫名奇妙就报错了 The "data" option sh
  • 转载intel一位研究VR的牛人的文章;关于图像变换的。最近对VR有些兴趣,准备研究一下!...Improved Pre-Warping for Wide Angle, Head Mounted Displays 2 Antworten This year has really been

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 34,217
精华内容 13,686
关键字:

beinmounted