
Vue学习中的小问题
vue起步
前端学习冲冲冲
这个作者很懒,什么都没留下…
展开
-
vue ul列表当前选中项高亮的一个变相用法
1.问题描述需求是对于列表中的图片,需要做到当前选中项高亮,这里需要改变的是背景图,和平时做的稍微有点不一样,不难但是也卡了我几分钟,现在记录一下2.代码html结构主要就是img的src属性动态指定,根据当前的index来判断,如果为当前选中的index,则高亮,高亮图片提前在保存数据的变量中导入。每一项li点击时的代码3.补充:值得记录一下的是,css有时可以灵活使用,flex布局可以结合margin等属性使用,比如下面这种布局可以使用flex结合index及margin完成...原创 2022-06-09 10:04:19 · 2907 阅读 · 1 评论 -
在使用事件总线传参时,出现了对应页面的dom元素获取不到最新数据的问题
1.问题说明我在登录页面,登录成功后将登录角色名传递到另一个组件(layout.vue),然后该数据要在layout.vue文件中使用,结果该数据的值一直是定义时的空2.上代码(1)在login.vue组件中,登录成功后发送该事件(2)在layout.vue文件中接收该事件(3)在dom元素中使用该事件(4)结果是loginRole值一直为空3.原因分析数据是接收到了,但是this.bus.bus.bus.on是异步方法,在loginRole发生变化前,dom元素已经加载完了。元素中使原创 2022-05-19 18:23:09 · 714 阅读 · 0 评论 -
在vue中实现导出后端返回的二进制流文件为本地的.xlsx文件
1.问题导出二进制流文件时出现问题2.分析前端可以接收二进制流文件,但是不能处理,所以打印出数据看起来是乱码,因此需要前端先指定返回数据类型,和后端相同则可以正常显示3.上对应vue文件导出函数的代码 // 导出 async exportData() { let data = await exportxls(this.form); // console.log(data instanceof Blob); let fileName = "预约记录"原创 2022-05-18 09:03:12 · 1232 阅读 · 0 评论 -
element-ui中一个单元格想要渲染两个后端返回字段的方法
1.困惑所在常规操作是,在columns数组中将需要绑定的数据字段名设为prop,这样通过item.prop可以直接获取到对应值。但当我需要绑定两个字段值,如果硬想着只能通过prop去取值就实现不了。2.解决方法:其实为每个字段都取名prop是为了在写代码时每一项的数据都可以使用item.prop的方法获取,简便代码。当有需要时,可以直接通过row.字段名去获取对应的数据,这样一行就可以获取多个字段的数据了如上,前端的字段名可以自己随便取,不一定要和后端一样,取数据时直接取用后端返回的字段名即可原创 2022-05-09 18:40:59 · 667 阅读 · 0 评论 -
element-ui的el-radio标签默认值不选中的原因
1.原因通常后台返回的数字都是Number类型,而直接使用label属性绑定的数据是字符串类型,所以默认不选中。2.解决办法在label前加:,使用动态绑定数据的方法,即可将1和0当做数字。(浅谈下标签用法:v-model绑定的status和label关联,status=1时,展示的radio项是label为1的项)<template> <div> <el-radio-group v-model="status" @change="valChange">原创 2022-05-08 15:24:09 · 6984 阅读 · 0 评论 -
以el-select为例,说明element-ui中修改标签样式的方法
**问题:**在element-ui框架中,很多元素不能直接修改样式。**使用场景:**需要切换select的option,并且每次切换时可以拿到对应城市的id,以发送网络请求展示不同数据,此时对样式进行修改。解决步骤:1.默认select标签被渲染到和app元素同级,所有首先通过:popper-append-to-body="false"将该元素放到app元素下级。顺便说下,封装的select类似于原生的select,在change事件中可以拿到通过v-model绑定的value值(即当前选中项的原创 2022-04-22 16:20:48 · 4220 阅读 · 0 评论 -
eslint快捷使用
1.在创建项目的时候,选择安装ESlint2.为了平时减少错误提示,可以在webpack配置文件中暂时关闭代码检测3.关闭后平时敲代码不会报格式错误了,当我们需要统一格式的时候,只需通过npm run lint 开启自动更正代码,即可自动修改代码中的格式问题,这样可以体验更好的使用eslint...原创 2022-03-25 23:40:26 · 143 阅读 · 0 评论 -
vue渲染列表时报错Avoid using non-primitive value as key, use string/number value instead.
1,问题:vue渲染列表时报错Avoid using non-primitive value as key, use string/number value instead.2.原因:这个是由于v-for循环里,key值可能重复了,所以会报这个错。key值是必须唯一的,如果重复就会报错解决方法:可以把key值改为index或者id,就可以避免这个情况————————————————...原创 2021-05-04 10:37:33 · 292 阅读 · 0 评论 -
控制台报 [WDS] Disconnected!不影响代码运行。
1. 问题:Vue运行项目时,控制台报 [WDS] Disconnected!不影响代码运行。2. 解决方法:将config文件夹下的index.js中的host: '0.0.0.0',改为host: '127.0.0.1',重新启动,刷新页面或者重新启动即可3. 解释:因为用了全局代理软件,所以要把host:改成127.0.0.1附:全局代理,连接成功以后,您本机的IP地址全部改变了(即是代理地区的IP)局部代理,只是针对浏览器或软件改变,查询到的ip还是本地的,但能正常访问国外的网页(注:局部原创 2021-04-27 21:45:07 · 2224 阅读 · 0 评论