写前端时遇到的Bug

雨点打透心脏的1/2处 2023-01-07 08:54 125阅读 0赞

**写前端时遇到的Bug**

--------------------

*  **Bug1**

**出现的问题：**

element-ui 的 Select 组件选值后，在 @change 方法中可以获取到新赋的值，但是页面上的 Select 框却没有显示  
![在这里插入图片描述][20210116153027962.gif]  
**问题的原因：[https://cn.vuejs.org/v2/guide/reactivity.html][https_cn.vuejs.org_v2_guide_reactivity.html]**

Vue 无法检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的.

**解决办法：** 在data 的对象变量中将属性显式地声明出来：  
![在这里插入图片描述][20210116154025463.png]

--------------------

*  **Bug2**

**出现的问题：**

vue 中引入 echarts 时报错：  
![在这里插入图片描述][20210123184235231.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_10_color_FFFFFF_t_70]  
**参考文章：[https://blog.csdn.net/weixin\_44874618/article/details/110647652][https_blog.csdn.net_weixin_44874618_article_details_110647652]**

版本问题

**解决办法：[https://www.cnblogs.com/cyhsmile/p/14098269.html][https_www.cnblogs.com_cyhsmile_p_14098269.html]**

将 echarts 版本降至5以下

--------------------

*  **Bug3**

**出现的问题：**

在 el-pagination 分页组件中设置的 :page-sizes 选项为： \[5, 10, 15, 20\]  
![在这里插入图片描述][20210123194958774.png]  
默认应该为5，但是页面默认加载的一直都是 **10/page**  
![在这里插入图片描述][20210123195612379.gif]

**原因：**  
如果你每页的条目数 total 少于10条，则需要设置 :page-size 属性  
该属性是你在data里面设置的每页有多少条的名字  
如果不设置这个属性，在显示的时候会按照你设置好的条数显示数据，但是 element 会按照每页10条来显示下面的分页码

**参考文章：[https://www.cnblogs.com/lljun/p/11423556.html][https_www.cnblogs.com_lljun_p_11423556.html]**

**解决办法：添加 :page-size 属性：**

<el-pagination style="margin-top:20px;" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[5, 10, 15, 20]" :page-size="limit" layout="total, prev, pager, next, jumper,sizes" :total="total">
    </el-pagination>

--------------------

*  **Bug4**

**vue 中出现的问题：**

There are multiple modules with names that only differ in casing.
    This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
    Use equal casing. Compare these module identifiers:
    * D:\BLU\vuecode\project\vue-storage\node_modules\vue-loader\lib\loaders\pitcher.js??ref--4!D:\BLU\vuecode\project\vue-storage\node_modules\babel-loader\lib\index.js!D:\BLU\vuecode\project\vue-storage\node_modules\vue-loader\lib\index.js??vue-loader-options!D:\BLU\vuecode\project\vue-storage\src\views\account\setemail\setEmail.vue?vue&type=script&lang=js&
        Used by 4 module(s), i. e.
        D:\BLU\vuecode\project\vue-storage\node_modules\vue-loader\lib\index.js??vue-loader-options!D:\BLU\vuecode\project\vue-storage\src\views\account\setemail\setEmail.vue
    * D:\BLU\vuecode\project\vue-storage\node_modules\vue-loader\lib\loaders\pitcher.js??ref--4!D:\BLU\vuecode\project\vue-storage\node_modules\babel-loader\lib\index.js!D:\BLU\vuecode\project\vue-storage\node_modules\vue-loader\lib\index.js??vue-loader-options!D:\BLU\vuecode\project\vue-storage\src\views\account\setemail\setemail.vue?vue&type=script&lang=js&
        Used by 4 module(s), i. e.
        D:\BLU\vuecode\project\vue-storage\node_modules\vue-loader\lib\index.js??vue-loader-options!D:\BLU\vuecode\project\vue-storage\src\views\account\setemail\setemail.vue

**原因：**

vue文件import引入的路径与文件名存在大小写不一致的情况

import('@/views/account/setemail/setEmail')

![在这里插入图片描述][20210317194950178.png]  
**解决办法：将大小写修改为一致即可**

--------------------

[20210116153027962.gif]: /images/20221119/3643cce836c844ae88a6851142d9b188.png
[https_cn.vuejs.org_v2_guide_reactivity.html]: https://cn.vuejs.org/v2/guide/reactivity.html
[20210116154025463.png]: /images/20221119/239cca5c6e9a4d418fe9f33f336e3d2e.png
[20210123184235231.png]: /images/20221119/7b0aa7b3a22244b6bbec1ac4effe820d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_10_color_FFFFFF_t_70]: /images/20221119/7d8ef8a37cef496eb1e23eb6613ddd6b.png
[https_blog.csdn.net_weixin_44874618_article_details_110647652]: https://blog.csdn.net/weixin_44874618/article/details/110647652
[https_www.cnblogs.com_cyhsmile_p_14098269.html]: https://www.cnblogs.com/cyhsmile/p/14098269.html
[20210123194958774.png]: /images/20221119/c6c2a1914ae94f48aa24f3301aaaeb32.png
[20210123195612379.gif]: /images/20221119/ab19fe493ed04006ad4614820c25b3bd.png
[https_www.cnblogs.com_lljun_p_11423556.html]: https://www.cnblogs.com/lljun/p/11423556.html
[20210317194950178.png]: /images/20221119/32ff105ca37148c391c176ee0e5465c2.png