您现在的位置是:首页 > Javascript
当前栏目
Vue3.0踩坑笔记
2023-02-25 18:27:40 时间
监听路由变化
踩坑:由于route.path是异步获取当前path,导致页面刷新并不能保持menus正确的active。 解决方案:使用watch监听当前path,可拿到最新的path
1 const selectedKeys = ref([]);
2
3 // 监听路由变化,更新menus当前选中
4 watch(
5 () => route.path,
6 (newVal) => {
7 selectedKeys.value = [newVal];
8 }
9 );
v-for的解构
1 <a-doption v-for="{ type, status, handle, title } in data"
2 ><a-button
3 :type="type || "primary""
4 :status="status"
5 @click="handle(record)"
6 >{{ title }}</a-button
7 >
8 </a-doption>
ref如果绑定给modal里的元素,是异步绑定的
问题:由于modal默认关闭。里面的元素也就没有渲染,导致ref还是null的绑定状态,即使打开modal也不能立刻绑定上ref
解决方式:通过包裹定时器获取ref,转为异步,在modal展开时,就会先去绑定ref,后执行定时器里的逻辑
1const handleWrite = (record) => {
2 data["modalVisible"] = true;
3 if (record)
4 setTimeout(() => {
5 formRef.value.setValue(record);
6 data.articleId = record.id;
7 });
8 };
echarts到生产环境bug
生产环境echarts第一次渲染没问题,一旦切到其他路由再切回来就不渲染了,本地就没有这个问题。。
通过检查dom发现虽然组件第二次重新渲染时,第一次组件渲染生成的echarts实列依然存在(未销毁)导致第二次组件渲染但是echarts无法成功渲染展示
解决方案:在组件挂载时先提前销毁所有echarts实例。
1onMounted(() => {
2 echarts.init(document.querySelector("#allEcharts")).dispose();
3 echarts.init(document.querySelector("#categoryEcharts")).dispose();
4})
未完待续
相关文章
- JDK中内嵌JS引擎介绍及使用
- 49195,npm最后的疯狂?盘点10款最有前途JavaScript构建工具
- 译文:5个增强Node.js应用程序增强功能
- 4个例子,吃透 JavaScript 实现的二叉搜索树 BST
- Vue中使用XML和JSON格式互转插件
- JDK中Jshell简单使用(JDK9版本以上或者JDK9版本)
- shiro中的JSP标签支持
- Java技术点-json转对象,对象转json
- SpringBoot+SpringDataJpa @Query之 JPQL使用书写模板(模糊查询and条件查询)
- Spring Boot中的Freemarker模版引擎引用css和js的正确姿势
- Node.js解压版的环境配置及相关常用命令
- JSP学习笔记(6)—— 自定义MVC框架
- JSP学习笔记(5)——Servlet、监听器、过滤器、MVC模式介绍
- Jsp学习笔记(4)——分页查询
- APIJSON简单使用
- JSP学习笔记(3)——JSTL 标签库
- JSP学习笔记(1)——Jsp指令、动作元素和内置对象
- JavaScript ES6 Promise对象
- Web前端——JavaScript扩展补充
- Web前端——表单提交和Js添加选项