vue项目错误集

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

解答： 在循环中使用错误的key了，比如：

<el-menu-item :index="item.index" :key="item">
    <i :class="item.icon"></i>{{ item.title }}
</el-menu-item>

改为：

<el-menu-item :index="item.index" :key="item.index">
    <i :class="item.icon"></i>{{ item.title }}
</el-menu-item>

ps：for循环中的:key必须是一个string或者number

2、报错：[Element Migrating][ElMenu][Attribute]: theme is removed.

<el-menu :default-active="onRoutes" class="el-menu-vertical-demo" theme="dark" unique-opened router>

解答：由于新的Element UI版本去掉和替换了一些属性，去掉报错的属性即可

<el-menu :default-active="onRoutes" class="el-menu-vertical-demo" unique-opened router>

3、报错：Uncaught TypeError: Cannot read property 'push' of undefined

exitFn: () => {
    localStorage.removeItem("token");
    this.$router.push({path: '/'});
}

修改为：

exitFn(){
    localStorage.removeItem("token");
    this.$router.push({path: '/'});
}

解答：方法内的this指向问题，修改this指向问题即可

4、 img的src属性绑定url变量，但是图片加载失败

<img src="{{imgUrl}}"/>

解答：对于img标签的src属性值，需要使用v-bind:来绑定

<img v-bind:src="imgUrl"/>

5、报错：TypeError: Cannot read property '$el' of undefined   [Vue warn]: Error in mounted hook: "TypeError: Cannot read property '$el' of undefined"

<el-table
   :data="tableData"
   style="width: 100%"
   :height="tableHeight"
   :default-sort = "{prop: 'date', order: 'descending'}"
>
</el-table>

js部分：

mounted:function(){
   this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 50;
}

解答：在标签中增加ref属性即可

<el-table
   :data="tableData"
   style="width: 100%"
   :height="tableHeight"
   ref="table"
   :default-sort = "{prop: 'date', order: 'descending'}"
>
</el-table>

6、报错：This relative module was not found:

解答：引用的文件路径不对，修正即可。

7、报错： Uncaught (in promise) {data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}

axios({
   method:'get',
   url: 'https://api.github.com/users/用户名',
   params: {}
})
.then((response) => {
   resolve(response);
})

解答：通过axios的http请求需要加上.catch()，完整形式 axios().then().catch()

axios({
     method:'get',
     url: 'https://api.github.com/users/用户名',
     params: {}
})
.then((response) => {
      resolve(response);
})
.catch(function (error) {
      console.log(error);
});