
vue
文章平均质量分 52
前端vue
scl、
回首往昔 更进一步 ---工作1年的快乐风男♂
展开
-
Vue解决报错11_父组件使用子组件的echarts折线图不能显示(父组件传值慢于子组件初始化导致)
一、问题描述父组件发送请求获取数据,然后父组件传值给子组件的折线图,但是发现子组件显示空白,尽管在mounted()已经使用赋值了 // 填充数据 initData() { this.optionValue.series = this.value.series; this.optionValue.xAxis = this.value.xAxis; },使用log日志查看赋值并未生效 this.chartLine = echarts.init(document原创 2021-11-07 11:59:08 · 1446 阅读 · 0 评论 -
Vue解决报错10_项目打包后图片不显示问题(只显示缩略图)
问题描述登录首页的logo不能正确显示,如图对应代码 <!-- <img src="src\asserts\ims\zgyd_log.png" /> -->其中路径应该是没问题的但就是不显示问题解决思路上面我是引用的本地的图片,如果你引用网上图床的图片,请确保url正确,可以浏览器访问验证能否访问到图片本地引用的话,无非就是资源格式问题,如svg是否支持,再者就是路径问题解决,这里修改了路径<img class="logo" src="~@/asset原创 2021-10-30 10:46:58 · 691 阅读 · 0 评论 -
Vue学习篇3_自定义时间线timeline
1.效果展示2.代码实现父页面子页面timeline.vue子页面card.vue父页面 <div v-for="(v, i) in uni_data" :key="'id' + i" class="year-item"> <timeline :time-data="v"> <template slot="cardSlot" slot-scope="scope"> <!--这里采用作用域原创 2021-08-13 13:27:08 · 5459 阅读 · 3 评论 -
Vue常用API小结_谷粒商城分布式基础篇项目前端API知识小记
目录树型目录的增删改查封装httpRequest工具类封装页面权限控制工具类状态修改按钮文件上传自定义列显示内容树形组件抽取,子、父组件传值三级节点选择器一、树型目录页面<el-tree :data="menus" :props="defaultProps" :expand-on-click-node="false" show-checkbox node-key="catId" :default-expa原创 2021-07-30 16:13:33 · 531 阅读 · 0 评论 -
Vue解决报错9_人人开源renren-fast-vue执行npm install报错解决(sass的版本太低而node的版本太高导致)
一、问题描述在运行人人开源框架的时候,拉去码云上的之后安装依赖报错,我的node版本是PS E:\项目\guli-shop-vue\renren-fast-vue> npm installnpm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142npm WARN deprecated har-validator@5.1.5原创 2021-07-22 18:44:23 · 10668 阅读 · 10 评论 -
Vue解决报错8_打包时TyeError: Class extends value undefined is not a constructor or null
一、问题描述执行num run build:prod 报错,但是npm run dev没问题原创 2021-03-26 21:16:26 · 9816 阅读 · 5 评论 -
Vue解决报错7_[Vue warn]: Property or method “upDispachFormList“ is not defined on the instance but refer
一、问题描述[Vue warn]: Property or method "upDispachFormList" is not defined on the instance but refer动态数据绑定的问题,上面在el-table里设置了title,但是elemet-ui的表格并无此设置参考:https://element.eleme.cn/#/zh-CN/component/table二、解决删除title即可,需要设置表格的 标题可以 设置div然后再添加样式...原创 2021-03-18 11:36:22 · 756 阅读 · 0 评论 -
Vue学习篇2_设置登录主页背景图片充满窗口且大小随窗口变化、优化用户退出之后路由缓存记录的清除、新用户登录之后重新自动加载路由列表、左侧菜单栏文字跟随角色动态变化
一、设置登录主页背景图片在父容器的css样式中,直接设置// 设置背景图片及logo background: url("~@/assets/img/henu3.jpg") fixed no-repeat; background-size: cover;需要注意的问题就是,不要忘记background-size: cover; ,设置背景图片随窗口大小变化,效果图二、优化切换权限不同的用户路由记忆问题对于权限不同的用户,用户切换的过程中,用户注销之后,vue的路由还会存在当前用户的原创 2021-03-15 22:24:33 · 1686 阅读 · 0 评论 -
Vue解决报错6_日期类型的数据具有格式要求,需要和后端数据库对应,以便于存储和展示
问题描述当前端传入日期类型为字符串,而实体和数据库中对应的为Date类型,就会引发报错需要加上日期控件,而且需要格式化为对应的日期格式但是,格式化后发现:部分日期未传入后端成功日期展示格式不一致一、问题解决1检查了,Date数据格式化没有错,字段名和实体和数据库都一致,但是为什么传值失败后来检查了一下,原因是临时行对象在往待提交对象数组添加时,在字段对应的传值时,多了一个空格导致传值失败二、问题解决2渲染的时候未将日期格式化...原创 2021-03-11 09:55:14 · 614 阅读 · 0 评论 -
Vue学习篇1_用户权限控制_登录的用户从后端获取角色信息role,前端动态展示侧边导航栏、不同资源
一、写在前面关于前端的权限控制,常见的体现用处:不同的用户左边展示的菜单栏不太一样下面具体的展示的实现二、具体实现1.新建store/permission.js文件,配合router.js来实现功能大致原理:根据登录用户的role来 在 原来 静态路由constantRouters 的基础上 将待添加路由 addRouters 拼接上// store/permission.js// 0. 导入router.js下的静态路由、动态获取的路由映射import { asyncRoute原创 2021-03-05 20:35:34 · 2305 阅读 · 1 评论 -
Vue解决报错5_Tinymce 富文本不能传递双向绑定的数据到后端、使用过程遇到问题及解决
不得不说使用Tinymce富文本的过程中可是出现了不少问题bug,搞得真让人发狂!!!1. 前端默认写在data()中的初始标题数据传不到后端(!)2. 标题能传到后端但是自己自定义输入的内容传不了(!!)3. 自定义输入的内容能传了,但是对于多个 富文本 框输入不同的内容 传到后端的确实 前一次某个 富文本框 输入的一个固定内容(!!!) 一顿操作以为解决了,没想到还是太年轻4. 能正确传递多个自定义输入的文本框内容,但是修改的时候出问题了,修改之后还是原来的内容(叹气!!!!)原创 2021-03-05 18:43:45 · 4299 阅读 · 2 评论 -
Vue解决报错4_父组件传递给子组件值,子组件使用插值表达式可以渲染,放在created函数中提示undefined
一、问题描述父组件传递给子组件值,子组件使用插值表达式可以渲染,放在created函数中提示undefined截图父组件子组件二、原因分析应该是 顺序的问题(生命周期的问题),在子组件created中调用getInfo()函数的时候,props还没有传值所以出现created里面的却不会发生改变, 子组件的html中的{{{principalID}}的值虽然会随着父组件的值而改变,但是过程中会报错:[Vue warn]: Invalid prop: type check fai原创 2021-02-25 12:58:10 · 860 阅读 · 0 评论 -
Vue解决报错3_Syntax Error: TypeError: this.getOptions is not a function
问题描述使用vue ui 创建的项目,安装less 4.0.0、less-loader8.0.0开发依赖使用lang="less"之后发现编译报错,Syntax Error: TypeError: this.getOptions is not a function重装几遍依赖还是不行,感觉还是版本的问题!解决试了试将less-loader 和 less 的版本降下来,果然不报错了重新安装低版本的less依赖...原创 2021-02-03 22:14:50 · 19424 阅读 · 6 评论 -
Vue解决报错2_自定义vue的eslint效验,忽略空格检查、console报错检查
问题描述eslint效验对于新手不太友好,随便一个空格,逗号都会引发编译错误为了解决这种情况,可以关闭eslint效验自定义eslint规则解决第一种方式可以自行尝试,我推荐第二种方式,只需要加上简单的配置语句即可module.exports = { root: true, env: { node: true }, extends: [ 'plugin:vue/essential', '@vue/standard' ], parserOpt原创 2021-02-02 21:39:34 · 2207 阅读 · 0 评论 -
Vue解决报错1_This relative module was not found: * ./components/Login.vue in ./src/router/index.js
报错描述:This relative module was not found:* ./components/Login.vue in ./src/router/index.js版本vue2.0,@vue/cli 4.5.11,应该是路径的问题解决将.换为@即可,发现不在报错原创 2021-02-02 21:15:49 · 36243 阅读 · 8 评论