vue错误合集与解决方法

写在前面

需求：使用vue开发过程中出现的错误，整理了一版错误合集与解决方法、持续更新

1、使用了获取元素信息：this.$refs，标签未加ref属性

• 错误信息：

TypeError: Cannot read property '$el' of undefined   [Vue warn]: Error in mounted hook: "TypeError: Cannot  
 read property '$el' of undefined"

• 解决方法:

需要在标签中增加ref属性

2、for循环中key使用错误

• 错误信息：

vue.esm.js?efeb:591 [Vue warn]: Avoid using non-primitive value as key, use string/number value instead.

• 错误使用：

               
 {{item.label}}
            

• 解决方法：for循环中的key必须是一个string或者number

               
 {{item.label}}
            

3、eslint缩进报错

• 错误信息：

eslint: Expected indentation of 2 spaces but found 4

• 解决方法:

eslint所有缩进只能用两个空格

4、严格的标点控制

• 错误信息：

Missing space before value for key 'name' 

• 解决方法:

在关键字“值”之前缺少空格

4、严格的标点控制

• 错误信息：

Missing space before value for key 'name' 

• 解决方法:

在关键字“值”之前缺少空格

5、webpack 2中混用import和module.exports

• 错误信息：

Cannot assign to read only property ‘exports’ of object ‘#Object’ 

• 解决方法:

webpack 2中严格不许混用import和module.exports,统一为 import和export default

6、项目中提示找不到或者缺失文件或组件

• 错误信息：
  
  image.png

• 解决方法:

照着提示缺少什么文件，就去npm 改文件或者import，自定义的变量要先声明。

7、this指向问题

-错误代码

Uncaught TypeError: Cannot read property '$notify' of undefined

• 错误使用：

handelSearch(){
        let that=this;
        this.$refs['listQuery'].validate((valid) => {
          if (valid) {
            if (this.sourceType.length < 1) {
              this.$notify({
                title: '失败',
                message: '请至少选择一项数据来源',
                type: 'error',
                duration: 3000
              })
              return;
            }

• 解决方法：定义指向window的this

handelSearch(){
        let that=this;
        this.$refs['listQuery'].validate((valid) => {
          if (valid) {
            if (that.sourceType.length < 1) {
              that.$notify({
                title: '失败',
                message: '请至少选择一项数据来源',
                type: 'error',
                duration: 3000
              })
              return;
            }