BUG心得
公孙元二
如果你看到这句话,幸运值+1
展开
-
Module not found: Error: Can‘t resolve ‘react-dom/client‘
解决方案当你的react版本低于18时,可以采用如下方案原创 2022-07-04 09:45:14 · 3983 阅读 · 0 评论 -
Functions are not valid as a React child. This may happen if you return a Component instead of
报错信息:Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.使用一个{} 去渲染一个组件 就会报这样一个错误例如 是一个组件使用时不小心写成了 所以报上面的错误应该将 改为...原创 2022-06-26 18:20:44 · 3185 阅读 · 0 评论 -
yarn : 无法加载文件 C:\Users\xxx\AppData\Roaming\npm\yarn.ps1,因为在此系统上禁止运行脚本
解决方案开始菜单中搜索PowerShell以管理员身份打开执行:set-ExecutionPolicy RemoteSigned 选择y查看执行策略:get-ExecutionPolicy 查看是否为RemoteSigned完成!转载 2022-06-22 09:57:46 · 808 阅读 · 0 评论 -
uniapp 微信小程序fail parameter error: parameter.filePat…parameter.name should be String instead
uniapp的uni.uploadFile官方文档点击此处首先,如果是uniapp开发微信小程序,是无法实现一次性上传多个文件的,uniapp开发App才支持。查看原因可点击此处。其次,filesPath和name是必填的,且filesPath和name都必须是String类型,且不能是空字符串和undefined。...原创 2022-04-29 10:57:16 · 7562 阅读 · 1 评论 -
Unhandled promise rejection TypeError: Cannot read property ‘request‘ of undefine
缺乏对promise的异常处理。原来: getNewToken().then(res => { console.log('[观测点1]',res,resolve) this.request({ url, method, params, callback: resolve }) })改成: getNewToken().then(res => { console.log('[观测点1]',res,resolve) this.requ原创 2022-04-27 22:40:54 · 8991 阅读 · 0 评论 -
uniapp 微信小程序 web-view利用el-upload在微信开发者工具上可以上传文件,真机模拟点击上传按钮无响应
原因:在微信开发者工具有效果是因为是在PC浏览器环境,而el-upload是适用于PC web环境,如果使用真机模拟,不属于PC环境,所以el-upload上传按钮点击没反应。可以使用vant.js等第三方的移动端UI库。vant2官方地址:https://vant-contrib.gitee.io/vant/v2/#/zh-CN/uploader#wen-jian-yu-lan...原创 2022-04-17 22:43:49 · 1610 阅读 · 0 评论 -
vue报错Expected Object, got PointerEven
props你传错值了,不信你打印一下看看。原创 2022-03-02 18:50:40 · 2028 阅读 · 0 评论 -
vue使用 echarts报错 not read properties of undefined (reading ‘init‘)
在npm安装完echarts后,如果是想在某个页面使用可以这么写:<script>import * as echarts from 'echarts' mounted(){ this.initChart() }, methods:{ initChart(){ const myChart = echarts.init(document.getElementById('charts')); myChart.setOption({原创 2022-02-28 23:04:39 · 634 阅读 · 0 评论 -
uniapp 微信小程序 map获取接口数据后地图标注marker不会渲染显示
1.先确保marker数据符合要求,比如id、latitude、longitude等字段都有。2.等页面加载完成后再渲染:const that = thiswx.nextTick(() => { that.markers = data uni.hideLoading()})↑ 在这里用wx.nextTick代替this.$nextTick。如果以上办法没用,就只能用setTimeout,且把时间设置长一点,比如4秒...原创 2022-02-19 23:02:04 · 2003 阅读 · 0 评论 -
vue uniapp tabs swipers标签页动态加载子组件,子组件会多次渲染的问题
产生原因因为上述采用了 tabs选项卡,而且也使用 v-for循环(没办法,主要是 tabs是动态的)。因为子组件 写在v-for循环中,每次循环都会 创建一个 对象,导致创建很多的组件,点击一次tabs 循环后的 所有的 component都 发送了请求(或者说所创建的多个子组件都走一遍生命周期)。解决方案原理:给组件的渲染添加限定条件,只有在点击到当前swiper的时候才去渲染组件代码:<swiper class="swiper-group" :style="{height:swipe原创 2022-02-14 15:35:24 · 2205 阅读 · 0 评论 -
解决 uniapp 微信小程序 swiper里的内容不显示问题 - 个人笔记
问题描述:页面是拥有3个item的swiper,每个swiper都是一个长滚动列表,每个列表都是都是一个个item(封装成名为dataItem的组件),其中给dataItem组件传递“itemdata”和“currentType”参数,但是itemdata显示没问题,下面的按钮部分不显示(如果用户左右手动切换swiper又可以显示),尝试了v-if、setTimeout、nextTick等都没有效果,后来才发现是currentType 的问题,于是把currentType 从v-if条件里面去掉。盲猜是s原创 2022-02-07 18:13:06 · 3407 阅读 · 0 评论 -
uniapp uView搜索组件u-search点击右侧搜索按钮无效的问题解决
<u-search :show-action="true" action-text="搜索" :animation="true"></u-search>是否开启右边控件该控件为类似按钮形式,可以设置为"搜索"或者"取消"等内容,如果开启动画效果,用户确认搜索后,该控件会自动消失show-action 配置是否开启右边按钮控件。action-text 配置控件内容。animation (默认为 false )设置为 true 的话,失去焦点,或者点击控件按钮时,控件自动消失原创 2022-01-28 21:30:10 · 8142 阅读 · 1 评论 -
vue项目使用腾讯地图 自定义标注marker图标没效果(不显示)
毫无疑问是你的路径问题,因为你把<script>引入到index.html所以相对路径变成根目录下了。不信把png放到跟目录下,然后就可以引用显示,但是不推荐把png放到项目跟目录下。一般png是放在assets文件夹里面。如果想引用assets文件夹下的图标,应该这么写(也就是使用require): data() { return { markerUrl: require("@/assets/images/marker.png"),调用: this.m原创 2022-01-26 10:19:14 · 4108 阅读 · 2 评论 -
uniapp 微信小程序 scroll-view里的元素设置margin-top属性,出现滚动条
问题描述:在循环列表的时候明明数据还没沾满整个屏幕,但是出现了竖行滚动条官方回答:实践:<scroll-view scroll-y="true" style='height:{{winHeight - 100}}px' class='scrollcolumn'> <view style="content: ''; overflow: hidden;"></view> //由margin-top 垂直方向塌陷导致的,加一个空元素就好了 <view原创 2022-01-20 15:21:41 · 1996 阅读 · 1 评论 -
el-table tree-props eading ‘indexOf‘) at VueComponent.resetField
请nextTick以后再重置表单this.$nextTick(() => { this.$refs['tableData'].clearValidate() })原创 2022-01-12 15:06:04 · 286 阅读 · 0 评论 -
vue 两个el-select联动 清空后无法点击选择后一个el-select
需求:两个el-select联动,当第一个change的时候,清空第二个的值以及清空第二个的下拉框的数据源,但是清空之后发现,第二个el-select再也无法选择下拉数据,选择没有效果解决方案1:先判断再清空 async select1Change(id){ if (id) { this.formData.select2? this.formData.select2= '' : '' // 清空下拉框2的值 this.select2Data= []原创 2022-01-07 17:31:50 · 2126 阅读 · 0 评论 -
解决父组件将子组件作为弹窗调用只执行一次created的问题
需求:父组件把数据带到子组件去使用,一般都想着在子组件created的时候拿到数据然后开始处理原因:你把子组件写在父组件的template里,当父组件渲染的时候,子组件也渲染完成了,以及子组件的生命周期也走完了。方法一:在父组件页面给声明的子组件添加v-iffather.vue<child-dalog v-if="flag" />其他方法:父组件直接通过ref去改子组件的数据...原创 2022-01-06 17:03:16 · 748 阅读 · 1 评论 -
el-form自定义校验没有效果、提交表单无反应
从以下两个方向解决1.form-item是否添加prop<el-form-item label="客户名称" prop="name"> <el-input v-model="form.name" placeholder="请输入客户名称" /> </el-form-item>2.无值一定要返回callback(),否则便提交不了。 let phoneNumberValid = (rule, value, callback) => {原创 2022-01-05 18:07:55 · 2140 阅读 · 0 评论 -
vue Syntax Error: TypeError: this.getOptions is not a function
毫无疑问!就是你的scss与scss-loader版本不匹配。推荐一个可以使用的组合“sass”: “1.32.13”,“sass-loader”: “^10.1.1”,原创 2022-01-02 22:00:43 · 364 阅读 · 1 评论 -
el-table 右侧固定布局fixed=“right“ 错位
解决方案:<style lang="scss" scoped> .table-fixed { /deep/ .el-table__fixed-right { height: 100% !important; //设置高优先,以覆盖内联样式 } /deep/ .el-table__fixed { height: 100% !important; //设置高优先,以覆盖内联样式 } }</style>...原创 2021-12-28 17:10:44 · 3701 阅读 · 0 评论 -
vue pathRewrite无效
看看是不是另外在main.js等文件设置了全局的axios.defaults.baseURL,如果设置了全局的baseURL则会让pathRewrite无效,不过跨域还是有效的。 proxy: { '/aps': { target: `https://baidu1.me`, // 你要请求的接口 ws: false, //如果要代理 websockets,配置这个参数 changeOrigin: true, // 开启代理原创 2021-12-26 00:09:45 · 3819 阅读 · 2 评论 -
vue获取不到页面元素高度
比如我我想获取el-form的高度<el-form :model="addOrEditForm" class="el-form-dialog" label-width="120px" ref="elForm" ></el-form>1.不要在created里面获取,因为界面dom还没挂载到页面上2.el-form是elementui封装的元素,需要再获取的前提加一个$el, 就可以获取到其高度 this.refs.elForm.$el.offsetHeight如果是原创 2021-12-18 20:48:01 · 1739 阅读 · 0 评论 -
vue 解决界面不渲染问题/下一次操作才渲染上一次操作的最新数据
提示:首先确认数据是没问题的,此时如果是界面没有实施渲染,特别是等到用户下一次操作才渲染。以下的解决方案才有效果出现问题的原因:我使用了el-table,v-for渲染表单的控件,该表单中有两个下拉框,当A下拉框改变selected值时,B下拉框要去请求接口,更新下拉选项。此时把最新的下拉选项更新上去,但是我发现数据请求到了,赋值上去,但是下拉不会显示最新的,要等到再次改变A下拉框的seleted值时,B下拉框的下拉选项才显示上一次请求到的数据。解决方案this.$forceUpdate();原创 2021-12-16 13:54:03 · 10222 阅读 · 2 评论 -
elementui el-table的 @selection-change执行了两次
出现的情况:表格复选框执行两次,导致复选框无法勾选上<el-table ref="multipleTable" :data="tableData.slice((currentPage - 1) * pageSize,currentPage * pageSize)" tooltip-effect="dark" style="width: 100%" @selection-change="handleS原创 2021-12-15 09:13:40 · 3375 阅读 · 1 评论 -
[system] Map key not configured.
如何发现该报错的?答: 在uniapp开发地图功能时,微信开发者工具正常,但是浏览器H5报错:Map key not configured.解决方案:key自己去申请,腾讯地图可点击此处原创 2021-12-01 15:55:29 · 9780 阅读 · 2 评论 -
vue设置代理解决跨域问题
目前市场上用vue技术不在少数,下面介绍一种配置代理方式在vue.config.js该文件里面配置如下: devServer: { port: 8001, open: true, disableHostCheck: true, proxy: { '/api': { target: 'https:/xxx.com', secure: true, // fa转载 2021-11-15 11:32:06 · 1557 阅读 · 0 评论 -
css设置z-index没有效果,解决div盒子被挡住了的问题
我有两个div,出现了下面的div挡住了上面的div,希望是上面的div把下面的div挡住,于是把上面div的z-index设大,但是没有效果。解决方案:经过查找发现,是因为下面的div设置了position: relative; 。于是把上面的div也设置position: relative;,此时再给上面的div设置z-index就能解决了。所以下次z-index发现没有效果的时候,看看有没有被定位被耽误了...原创 2021-10-26 19:01:04 · 4377 阅读 · 0 评论 -
日常解决前端bug的哲学思想
修正程序错误的第一步是要复现这个错误。如果你发现特殊情况太多,那你肯定是用错方法了。在存储日期中的年份的时候,请使用四位数字。测试只能证明程序有错误,而不能证明程序没有错误。东西没坏,就别乱修。程序错误中,80% 是语法错误,16% 是简单的逻辑错误,0.8% 才是困难的问题。不要基于想象开发,要基于原型开发。代码写得越急,程序跑得越慢。不要站着调试程序,那会使得你的耐心减半,你需要的是全神贯注。我没有写过诗,但有人说我写过的代码,像诗一样优雅。...原创 2021-10-19 11:44:29 · 229 阅读 · 0 评论 -
解决el-tab-pane中文本及div无法渲染显示的问题
我的代码: <el-tab-pane label="小时"> 允许的通配符[, - * /] <el-radio-group v-model="radio_hour"> <el-radio style="display:block;margin:10px 0;" :label="1"> 每小时 </el-radio>原创 2021-10-19 11:32:43 · 3062 阅读 · 1 评论 -
git错误 ! [rejected] master -> master (non-fast-forward)
问题描述执行: $ git pull origin master:master当要push代码到git时,出现提示: ! [rejected] master -> master (non-fast-forward) * [new branch] master -> origin/master分析问题我们可以这样理解这个问题就是:别人上传到远程仓库后,你没有及时的同步(、拉取)到本地,但是你同时又添加了一些内容(提交),以致于你在提交时,它会转载 2021-09-27 16:29:26 · 6066 阅读 · 0 评论 -
新创建的vue项目怎么与github(gitee)建立联系
本文以vue-cli搭建的项目上传github为例,演示如何利用vue-cli创建vue项目后,再创建github仓库,然后将vue项目与远程的github建立建立,最终本地项目文件可以通过git命令随时上传至github。gitee类似。1.创建一个vue3项目项目创建完毕,进入文件夹,看到此时已经有了git文件夹,我们需要新增远程git地址创建一个github仓库将默认分支从main改名为mater(某年某月以后github将默认分支名称master改为了main,但是我还习惯用mast原创 2021-09-27 11:22:28 · 899 阅读 · 0 评论 -
fatal: unable to access ‘https://github.com/username/xx.git/‘: OpenSSL SSL_read: Connection was
造成这个错误一般是网络不稳定,连接超时导致的,如果再次尝试后依然报错,可以执行下面的命令。打开Git命令页面,执行git命令脚本:修改设置,解除ssl验证git config --global http.sslVerify "false"此时,再执行git操作即可。...原创 2021-09-26 15:12:58 · 1938 阅读 · 0 评论 -
remote: Support for password authentication was removed on August 13, 2021. Please use a personal ac
一、 问题描述访问了全球最大的同性交友网站,又刚好去更新提交代码,又或你创建了一个新的仓库送给自己,又刚好想把这个仓库送给(push)github,你就刚好会遇到这个问题:remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead.大概意思就是你原先的密码凭证从2021年8月13日开始就不能用了,必须使用个人访问令牌(per转载 2021-09-26 15:04:16 · 5531 阅读 · 0 评论 -
解决el-table 动态显隐列的文字错位问题
初始状态过滤掉"地址"列以后,发生了文字错位原因: 使用了el-table-column的min-width和show-overflow-tooltip,当动态增删列的时候导致宽度计算错误。解决方案,去除min-width的宽度,可以给width赋值固定宽度。如果还存在位移问题可以使用以下的解决方案:1.对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时,可能需要调用此方法 this.$nextTick(() => { this.$re原创 2021-09-23 15:13:33 · 1734 阅读 · 0 评论 -
vue 子组件/父组件的生命周期只被执行一次的问题及再次进入页面静态数据不会初始化的问题
1.试试activated的生命周期,如果每次进入页面都会触发该生命周期而不会触发其他生命周期,则说明使用了keep-alive<template> <section class="app-main"> <transition name="fade-transform" mode="out-in"> <keep-alive :include="cachedViews"> <router-view :key="ke原创 2021-09-22 15:32:18 · 2662 阅读 · 1 评论 -
vue+el-table动态控制表格列的显隐出现高度偏移的问题
查阅文档可知element ui表格有一个doLayout()方法可以对表格进行重新布局.代码: this.$nextTick(() => { this.$refs.tableDataRef.doLayout(); });原创 2021-09-16 22:01:55 · 526 阅读 · 0 评论 -
微信小程序weui的tabs的高度被固定导致出现高度不够的情况
获取到当前swiper元素,使用calc设置高度即可,代码如下:.weui-tabs .weui-tabs-swiper { height: calc(100vh - 100px) !important; }如果需要满屏,则设置:.weui-tabs .weui-tabs-swiper { height: 100vh !important; }原创 2021-05-17 14:56:54 · 630 阅读 · 0 评论 -
解决微信小程序执行完npm install xx后依然报错[ miniprogram/pages/xxx/xx.json 文件内容错误] miniprogram/pages/xxx...
这个错误明显是没有安装依赖包,但是npm install完毕后还是没有解决这个问题。经过一番查找,原来是项目缺少配置:把“使用npm 模块”勾选上就可以了。原创 2021-05-17 10:25:11 · 3074 阅读 · 0 评论 -
word excel 应用程序无法正常启动(0xc0000142)
打开excel或者word时,显示出错:程序无法正常启动(0xc0000142),请单击’确定‘关闭应用程序,按提示单击确定。同时按住CTRL+alt+delete键在弹出的窗口中,点击”任务管理器“在新弹出的任务管理器窗口中找到”Microsoft Office Click-to-Run(sxs)“,单击点击右下角”结束任务“即可完成后随便打开一个excel表格或word文档会发现表格和文档能够打开,office可以正常使用...原创 2021-04-06 09:52:32 · 3778 阅读 · 4 评论 -
vue 报错error in render: “TypeError: Cannot read property ‘0‘ of undefined“
比如使用了 this.data[0]如果data不存在,就会报这个错原创 2021-03-18 15:39:36 · 208 阅读 · 0 评论