精华内容
下载资源
问答
  • vue脚手架引入了vant组件,我采用的是按需导入,在局部组件用到时,在局部调用,其它组件局部调用都没什么问题,但当我用到了Dialog组件就报错了,局部调用Dialog的代码如下: import {Field,Picker,Popup,...

    vue脚手架引入了vant组件,我采用的是按需导入,在局部组件用到时,就在局部调用,其它组件局部调用都没什么问题,但当我用到了Dialog组件时就报错了,局部调用Dialog的代码如下:

     import {Field,Picker,Popup,Button,Dialog  } from 'vant'
    components:{
              [Aber.name]: Aber,
              [ Field.name]:  Field,
              [ Picker.name]:  Picker,
              [ Popup.name]:  Popup,
              [ Button.name]:Button,
              [ Dialog .name]:Dialog ,
         }

    当我刷新网页的时候就报错了,报错如下图:

    解决方法如下:

    不要在局部组件引用Dialog组件,在全局main.js文件中引入Dialog(这里强调一下Toast也是在全局中引入)引入如下:

    import {Dialog, Toast} from 'vant';
    
    Vue.use(Dialog)
    Vue.use(Toast);

    然后运行再刷新下页面应该就可以解决问题了。 

     

    展开全文
  • 问题重现 之前socket页面放在子组件中,所以都是从父组件进去socket页面,刷新页面也会回到父组件,所以一直都正常 后来需要把socket页面从子组件移出来,这样一刷新页面就报错如下
    问题描述

    之前socket页面放在子组件中,所以都是从父组件进去socket页面,刷新页面也会回到父组件,所以一直都正常

    后来需要把socket页面从子组件移出来,这样一刷新页面就报错如下:

    在这里插入图片描述
    这是因为页面刷新会重新请求,但是没有请求到socket的数据。一开始以为是socket存放在vuex的原因,页面刷新的时候vuex里的数据会重新初始化,导致数据丢失。因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,vuex里面的数据就会被重新赋值。
    所以我试过在页面刷新前把数据存到本地,但不知道为什么无论如何就是获取不到socket,也就无法本地存储。

     created () {
        //在页面加载时读取sessionStorage里的状态信息
        if (sessionStorage.getItem("store") ) {
            this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
        } 
    
        //在页面刷新时将vuex里的信息保存到sessionStorage里
        window.addEventListener("beforeunload",()=>{
            sessionStorage.setItem("store",JSON.stringify(this.$store.state))
        })
      }
    

    也试过把socket数据挂载在vue上,而不是存储到vuex,结果还是无法在页面获取数据。
    这时才发现socket是在根组件App.vue页面获取并存储的。但是我不清楚为什么在其他页面获取不到。(有没有知道的大佬告诉我啊啊啊)

    解决方案

    在页面直接请求获取到socket

            this.$store.state.socket = io('socketUrl')
            this.$store.state.socket.on("yourname", (data) => {
            	......
            }
    

    呃呃呃 只能想到这么粗暴的方法了 总算解决掉卡了三天的问题!!!

    展开全文
  • Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments ...报错原因: webpack打包时使用的严格模式打包,而mui.js内部使用了'call...

    2019年12月14日 亲测有效

    一: 引入js文件报错

    报错信息

    Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions
    

    在这里插入图片描述
    报错原因:
    webpack打包时使用的严格模式打包,而mui.js内部使用了'caller', 'callee', and 'arguments',两者冲突.
    解决方案(删除严格模式)
    1.安装包

    cnpm i @babel/plugin-transform-modules-commonjs @babel/plugin-transform-strict-mode -D
    

    2.在配置babel-loader中配置

    plugins: [
        ["@babel/plugin-transform-modules-commonjs", { "strictMode": false }]
    ],
    

    如果有很多个plugins要写在最后,例如:(此代码中其他配置不要求 仅供全面参考)

                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env'],
                            "plugins": [
                                "@babel/plugin-transform-runtime",
                                ["@babel/plugin-transform-modules-commonjs", { "strictMode": false }]
                            ]
                        }
                    }
    

    到此完美解决

    二 使用mui的scroll组件,各种填坑,解决报错

    效果是区域滚动 ,鼠标按下不松 区域向左或向右滑动

    <template>
        <div>
            <div id="slider" class="mui-slider mui-fullscreen">
                <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                    <div class="mui-scroll">
                        <a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
                            推荐
                        </a>
                        <a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
                            热点
                        </a>
                        <a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html">
                            北京
                        </a>
                        <a class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html">
                            社会
                        </a>
                        <a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
                            娱乐
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </template>
    
    <script>
    	//1.引入js文件,路径根据个人需求修改
        import mui from '../lib/mui/js/mui.js';
        //2.初始化滑动控件
        mui('.mui-scroll-wrapper').scroll({
            deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0005
        });
    </script>
    

    坑一: 展示效果混乱
    在这里插入图片描述
    报错原因:设置了类 全屏展示
    解决方案:删除类mui-fullscreen
    坑二: 第一次打开页面 无效果 刷新就有效果了
    原因: 初始化控件的时机不对

    • 初始化滑动控件,是将类选择器.mui-scroll-wrapper交给mui,mui根据选择器获取到dom元素,再进行scroll()初始化,然而我们之前的写法是在组件还没挂载到页面就初始化了,没挂载到页面是获取不到dom元素的,所以不起这时候操作没有意义.

    解决方案:

    • 将初始化控件代码放到mounted函数中,表示组件放到页面上后才能初始化滑动条
    • mounted函数:当组件中的dom结构渲染好且已经挂载到页面上后,会执行这个生命周期函数
    • 要操作元素最早也要在mounted中操作,这时候的元素是最新的,也是第一时间能获取到的.
     mui('.mui-scroll-wrapper').scroll({
            deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0005
        });
    

    坑三: 若有用底部tabbar选项卡,会发现当滑动条能滑动时,底部选项卡无法点击跳转 报错

    [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See
    

    在这里插入图片描述
    在这里插入图片描述
    原因:
    选项卡的类mui-tab-item和引入的js冲突
    解决方案:
    将此类和类下面包含的元素,所有和此类牵扯的样式自己通过检查复制其样式,然后重新定义新的类名,解决冲突.

    坑四: 滑动时报错,对效果不影响可不管,如果看着烦就在style中加样式

    [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See
    

    在这里插入图片描述
    加此样式

    <style scoped>
        *{
            touch-action: pan-y;
        }
    </style>
    

    原因:是谷歌浏览器为了提高页面滑动流畅度而折腾出来的东西,如果换成其他浏览器可能不会出现此警告.
    CSS 属性 touch-action介绍:

    • 用于指定某个给定的区域是否允许用户操作,以及如何响应用户操作(比如浏览器自带的划动、缩放等)。
    • pan-y表示启用单指垂直平移手势,即如果纵向滑动在谷歌浏览器中可以提高滑动流畅度,如果pan-x表明横向提高滑动流畅度,两个值都可以随便用,只要不出警告就行.

    坑五: 能左右滑动时 自身选项点击无法跳转,例"热点","北京"点击无效
    解决方案:不通过router-link跳转,通过vue router官方提供的编程式导航跳转
    如果不懂编程式导航的可见我博文https://blog.csdn.net/weixin_45842655/article/details/103554428

    坑六: 电脑上通过谷歌浏览器调试都能正常使用了,但是在手机上调试时发现自身选项点击无法跳转
    解决方案:mui官方提供了一个tap事件 和click类似 可以解决此问题(仅mui的组件能用),把@click改成@tap即可

    展开全文
  • 但是有个问题,这个办法虽然不会报错了,也会显示,但是会造成闪一下的画面,因为开始渲染了,不显示,0.5秒以后渲染显示页面,页面会忽然出现,也想过把时间改短一点,人眼分辨不出来的地步,但是毕竟不是很...

    1.问题

    at Proxy.render (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-6900a511","hasScoped":true,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/first1.vue (app.js:3200), <anonymous>:17:50)

    报错就是这个样子的,但是数据其实是渲染出来了,这个问题是因为一开始渲染的时候数据还没来,等数据来了之后又重新渲染了一遍,所以我们既看到了数据有看到了报错。

    我一开始想的是mounted里接收一下,在刚开始挂载的时候就差处理这个数据,但是实际上是拿不到的。

    上一行是能拿到的,但是下面就拿不到了,搜了一下,貌似上面也是不应该拿到了,但是问题到这里差不多就能想到就是时间先后的问题,自然而然的想到了延时器。

    2.1延时器

    在元素上面写一个v-if判断一下

    但是有个问题,这个办法虽然不会报错了,也会显示,但是会造成闪一下的画面,因为一开始渲染了,不显示,0.5秒以后渲染显示页面,页面就会忽然出现,也想过把时间改短一点,人眼分辨不出来的地步,但是毕竟不是很正统的办法。

    2.1监听办法

    后来又搜了搜有监听的办法,当然这个也需要一个判断

    打印出来也有效果,刷新之后也不报错

    但是这个办法也有个问题,就是我们开发肯定是时不时在改代码的,vue里肯定都是热更新,改了代码之后自动更新,问题就来了,这个监听在你改了代码之后并不会出发,毕竟first1data这个数据没有更改,然后就又出现问题,因为v-fi那个更改是在监听里的,这下好了,模块直接隐藏掉了,虽然一开始不会报错,但是对于开发是不友好的

    2.3v-fi

    v-if简单粗暴,如果需要渲染就直接在上面写一个v-if

    解决了。。。。

    2.4最后

    不过我总感觉应该还有别的办法,但是还没找到,如果哪位看官有找到更合适的办法,麻烦告诉我下,谢谢

    展开全文
  • 个子组件改变了个 prop 的值时,这个变化也会同步到父组件中所绑定的值。这很方便,但也会导致问题,因为它破坏了『单向数据流』的假设。由于子组件改变 prop 的代码和普通的状态改动代码毫无区别,当光看子...
  • 今天在写组件中从父组件中通过props传值之后,在methods中对子组件的值进行重新赋值时候报出错误。 代码所示: Vue.component("opportunity-list-component",{ props: {//这里是组件可以接受的参数,也就是相当...
  • 解决问题前先串遍父子组件的生命周期钩子顺序 渲染过程 父组件挂载完一定在子组件都挂载完成后才算父组件挂载完成,所以父组件的 mounted 一定是在子组件的mounted后面 父beforeCreate ->父created -> ...
  • 问题原因:requirejs是先加载本身在加载其他相关组件进入,所以每次进入时加载完毕,再次刷新时应为缓存相关的问题导致加载顺序错乱,让一些模块没有加载进来产生报错。解决方法: 使用原生js待页面加载完毕后在...
  •  如果有跟我遇到同样问题的朋友一定跟我一样,心里万只草泥马飘过,都显示正常了,你TM的还给我报错,这我忍不了了,首先我在页面节点上直接打印,OK,没有问题,能完美的打印出来,然后换了个思路,在mounted...
  • vue 解决循环引用组件报错

    千次阅读 2018-02-05 15:38:47
    但是按照普通的组件调用格式来做时报错,错误信息为Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. 查询了官方文档,...
  • [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data ...报错的时候 父组件: 子组件: 原因: 单向数据流 所有的 pr
  • 刷新时,先访问的是后台地址,反馈数据后再加载页面内的React代码,最后才在浏览器内执行,这时报错404。是因为后台并没有针对这个过程的路由给出返回的HTML内容,没有执行React-Router。...
  • 安装好CDH的hive组件之后,Hive Metastore Server组件无法正常启动,输出日志显示:元数据不完整,导致组件无法正常启动,hive元数据库启动存在报错,无法正常创建数据库。 处理元数据缺失解决思路: 1、在hive...
  • 首先,我没有在子组件中直接修改父组件中的值,报错时因为我在关闭 el-dialog 的时候使用了 @close 在把@close方法改成:before-close 解决了报错的问题
  • 关于引用vue-calendar-component组件的一些问题GitHub地址解决方案 GitHub地址 贴个地址,我也不知道...这个报错的同时页面也会加载不出来,刷新后可以加载成功,但是打包后使用是不行的 解决方案 node_modu...
  • mac下npm安装全局组件报错

    千次阅读 2018-06-09 15:52:44
    1.没有权限安装 ...如: sudo npm install egg-init -g ...2.1.回到用户根目录下再新建个全局安装的路径 cd ~ mkdir ~/.npm-global 之前安装过的话会提醒存在了.npm-global这个文件夹 2.2.配置npm使用新的...
  • 在网上一通搜索后,大部分的解决办法都是修改源码,但是我个人觉得这并不是个很好的解决办法,所以,经过我的苦思冥想加实际验证,最终在不修改源码的情况下解决掉了这个让认头大的bug,解决方式如下:(比较简单) ...
  • 1.ionic4 加背景图片报错 场景再现:图片名称带中横线 -,后缀为 jpg,会报错 报错内容: 解决方法:图片名称中的中横线 -,改为下划线 _
  • 主要是因为jsonp是在页面中插入段js代码,而请求返回的也是段js代码,插入到页面中。 与json请求的差别是jsonp请求后台是需要带个callback的参数(该参与可以与后台协商命名),后台识别到callback参数后,会...
  • react使用antd的菜单组件出现以下报错 Warning: Legacy context API has been detected within a strict-mode tree. The old API will be supported in all 16.x releases, but applications using it should ...
  • 前言:不知道大家有没有遇到这样的情况,A组件需要v-model绑定个依赖于Vuex的数据,通常会直接绑定至Vuex数据源,如下所示是正常的处理流程; data: -------- trimesterId: "", //学期ID -------- computed: ...
  • vue编译打包dist文件之后部署到线上服务器 ,访问页面却是空白!...404报错:Not Found (截图如下) 以上就是关于“ vue项目编译打包dist文件之后部署到服务器 - 无法访问页面 ” 的全部内容。 ...
  • vue组件定时刷新

    千次阅读 2019-04-12 11:42:16
    遇到问题:需要定时刷新获取新的数据进行展示 解决方法:setInterval()定时刷新 备注:在vue项目中,我们该将刷新放在生命周期的mounted阶段。 代码: //定时刷新 mounted() { if(this.timer){ clearInterval...
  • 意欲寻找个良好的警告提示,发现 Notification 还不错,拿起来用~~~ 1、在 template 中 <el-button plain @click="warnMoodIndex"> 警告 </el-button> 2、在 script 的 method 中 warnMoodIndex() ...
  • 使用Element的 InfiniteScroll 无限滚动组件,代码正常,但是控制台还是会有报错: vue.esm.js?efeb:628 [Vue warn]: Error in directive infinite-scroll inserted hook: “TypeError: Failed to execute ...
  • [Vue warn]: Unknown custom element: <QuestionnaireOption> - did you register the component correctly? For recursive components, make sure to provide the "name" option ...上图的报错提示,...
  • antd tabs切换造成子组件重复刷新

    千次阅读 2020-09-09 22:17:16
    Tabs组件在来回切换的过程中,造成TabPane中包含的相同子组件重复渲染,例如: <Tabs activeKey={tabActiveKey} onChange={(key: string) => this.changeTab(key)} type="card" > <TabPane tab={...
  • 60 行 JS 代码搞定个下拉刷新组件

    千次阅读 2018-04-14 00:00:00
    (点击上方公众号,可快速关注)作者:elevenbeanselevenbeans.github.io/...这里特指移动端,原因如下:相较于点击右上角刷新按钮(还有可能要点两次,第次先展开 menu bar,然后才能看到 refresh 按钮),直接了
  • 在使用vue开发是,会遇到要刷新页面的情况,1,里面进行路由刷新,使用router.go(0);2,组件刷新的方法,可以用v-if或是通过改变key值来实现
  • 我上个测试项目使用mobx完全没问题,结果我正式项目上mobx,出毛病了,代码流程都是一样,但他操作成功,数据更新,就是不刷新组件我真是服气了,网上找了好久都没找到有用的文章,我真的自闭了,但是mobx也不能...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,507
精华内容 10,602
关键字:

组件一刷新就报错