写前端时遇到的Bug

---

• Bug1

出现的问题：

element-ui 的 Select 组件选值后，在 @change 方法中可以获取到新赋的值，但是页面上的 Select 框却没有显示

问题的原因：https://cn.vuejs.org/v2/guide/reactivity.html

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

解决办法： 在data 的对象变量中将属性显式地声明出来：

---

• Bug2

出现的问题：

vue 中引入 echarts 时报错：


参考文章：https://blog.csdn.net/weixin_44874618/article/details/110647652

版本问题

解决办法：https://www.cnblogs.com/cyhsmile/p/14098269.html

将 echarts 版本降至5以下

---

• Bug3

出现的问题：

在 el-pagination 分页组件中设置的 :page-sizes 选项为： [5, 10, 15, 20]

默认应该为5，但是页面默认加载的一直都是 10/page

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

参考文章：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')

解决办法：将大小写修改为一致即可

---