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