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.

错误使用：

<el-radio-group v-model="form.pollType" style="margin-top: 5px" @change='time()'>
              <el-radio  v-for="item in pollTypes" :key="item"  :label="item.value" :value="item.value" > 
 {{item.label}}</el-radio>
            </el-radio-group>

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

<el-radio-group v-model="form.pollType" style="margin-top: 5px" @change='time()'>
              <el-radio  v-for="item in pollTypes" :key="item.value"  :label="item.value" :value="item.value" > 
 {{item.label}}</el-radio>
            </el-radio-group>

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;
            }