挖坑指南：[Vue warn]: Avoid using non-primitive value as key, use string/number value instead
開始
報錯資訊：[Vue warn]: Avoid using non-primitive value as key, use string/number value instead
實踐
原因： 在v-for遍歷時，將item作為:key的值，而遍歷出來的item恰巧是一個物件。
解決：迴圈時新增index，或者將item.key物件中的某一項的值作為key。
總結
最後，你有什麼想法和思考可以在下方留言評論，大家一起談論技術，一起成長，感謝~或者掃描下方二維碼，與我取得聯絡~ （記得備註：CSND喔~）
相關推薦
挖坑指南：[Vue warn]: Avoid using non-primitive value as key, use string/number value instead
開始 報錯資訊：[Vue warn]: Avoid using non-primitive value as key, use string/number value instead 實踐 原因： 在v-for遍歷時，將item作為:key的值，而遍歷出來的item恰巧是一個物件。
挖坑指南：[Vue warn]: Invalid prop: custom validator check failed for prop "XXX".
前言 表單表單，開發後臺盡是表單。話不多說，先看看問題吧。 開始 這個專案呢， 是使用了iView UI框架。開始查詢網上類似的問題。type排查了一遍，最後發現是Input元件的type賦值為number。而官方支援的呢，如下 好吧~ 開發中遇到各種各樣的
挖坑指南：[Vue warn]: Invalid prop: custom validator check failed for prop "XXX".
前言 表單表單，開發後臺盡是表單。話不多說，先看看問題吧。 開始 這個專案呢， 是使用了iView UI框架。開始查詢網上類似的問題。type排查了一遍，最後發現是Input元件的type賦值為number。而官方支援的呢，如下 好吧~ 開發中遇到各種各樣的
Vue挖坑指南：[vue-router] Named Route 'XXX' has a default child route.
前言 OA系統，使用了路由的巢狀，希望在訪問子模組時，預設載入模組的預設路由。即為子模組設定預設路由 。 開始 我們先來看看，如何為子模組設定預設的路由。 這樣寫，會出現什麼問題呢？開啟控制檯看看。 實踐 vue-router給我們報了兩個警告，我們一個一個
挖坑指南：Vue.directive()自定義指令的實踐(含原始碼)
前言 迫不及待想要上車試一試，直接貼程式碼吧。 開始 兩個小例子，圖片的載入優化以及第三方外掛的配合使用。參考的資料在我分享的這篇博文中有記錄，感興趣的同學，可以參考更多。 <!DOCTYPE html> <html lang="en"> <hea
Vue挖坑指南：[vue-router] Named Route 'XXX' has a default child route.
前言 OA系統，使用了路由的巢狀，希望在訪問子模組時，預設載入模組的預設路由。即為子模組設定預設路由 。 開始 我們先來看看，如何為子模組設定預設的路由。 這樣寫，會出現什麼問題呢？開啟控制檯看看。 實踐 vue-router給我們報了兩個警告，我們一個一個
挖坑指南：vue重新整理某個路由就404了，咋辦？
前言 單頁後臺，上傳到線上，在某個路由重新整理時就報錯404。 開始 為什麼會出現這樣的問題呢？ 配置路由時，設定了訪問模式為mode: 'history'；而後端是無法判斷這是一個前端路由的。它會按照路徑去找相應的資源，但是在伺服器中並不存在，所以...404
挖坑指南：如何通過事件動態地切換iView的Tabs（v-bind與v-model的區別）
前言 iView的官方文件算是很詳細的了，但是如果我們沒有一定的程式設計經驗，看文件也是一件令人困惑的事情。 Tabs官方文件：http://v2.iviewui.com/components/tabs#API 開始 先來看看專案的需求 看看官方文件為我們提供的介面 &
挖坑指南：iView表單 日期校驗出錯
前言 表單資料的驗證在前端是很有必要的，它是資料的第一道過濾。可以避免一些錯誤的發生 開始 先看看我們的使用 雖然iView的官方已經更新到3.0的版本了，但是目前專案中使用的還是 2.0的版本。 官方的文件：http://v2.iviewui.com
挖坑指南：npm ERR! write after end
前言 團隊的專案，昨天還是好好滴，但是呢，github掛了，提交不了程式碼。晚上其他成員上傳了程式碼，今天決定重新提交。 開始 提交時發生衝突，回退了一下版本。 // 獲取歷史版本id git log --pretty=oneline // 回退到指定的版本 git reset --
挖坑指南：npm install命令各引數的區別(--sava --save-dev -g)
前言 在前端工作中，npm已經成為必不可少的一部分。npm install可以為我們的專案安裝依賴，那麼這個命令的引數，各代表什麼含義呢？ 開始 我們逐一來看看npm install --save-dev: 安裝我們專案開發時的依賴，比如一些外掛，對我們的less/sass/js/img
挖坑指南：百度鷹眼web api的使用與問題總結
前言 公司想做外勤管理的工具，要記錄員工的出行軌跡，研究了一下，發現高德、騰訊都沒有相關的API，只有百度地圖有一個鷹眼的服務。那就試試唄~ 開始 貨比三家，先來看看其他兩家的解決方案。 高德地圖：https://lbs.amap.com/dev/demo/path-recor
挖坑指南：在vuex的多個module中的getters裡存在相同的方法名，使用mapGetters會報錯？
前言 其實這個標題就是我們今天要談論的話題。 開始 在vuex中有多個module是很正常滴，為了方便管理呢，我們有些module中使用了相同的名稱。那麼，在使用時，就會報錯啦~ 實踐 其實在vuex的官網，已經為我們描述過啦~ vuex:https://vuex.vuejs
挖坑指南：iView Select的[email protected]事件無效
前言 日常挖坑。。 開始 上車。。 實踐 bug描述：Select元件，設定了filterable和remote，前端啟用模糊查詢。期望在使用者選擇某一結果項時，獲取選擇的物件。給Option綁定了點選事件，但是並未生效。 為什麼呢？ 應該是元件自身做了事件監聽。 那
挖坑指南：iView-admin動態配置route.meta.title（獨家）
前言 新的專案，基於iView-admin。結合自身的專案需求，對官方的模板進行一些修改。以達到動態修改route.meta，並同步更新麵包屑導航文字和標籤頁標題。 開始 如果你還未使用過iView-admin或者正在上路，那我們先來看看專案的需求以及遇到的問題。 那應該如何解
挖坑指南：ESLint + VS Code自動格式化程式碼
前言 最近在整理公司的之前的專案，對整個產品線進行梳理重構。由於專案的編碼人員換了好幾撥，每個人編碼又各有各的風格。現在在重新翻看，可讀性很差。考慮到後期專案的擴充套件，以及對現有專案的優化，決定對程式碼進行整理，並統一使用ESLint進行規範約束。 開始 “編碼一時爽，重構火葬
vue.esm.js?efeb:591 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten w
問題： vue.esm.js?efeb:591 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-rend
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten
使用vue自定義元件時遇到如下錯誤： [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component
vue報錯：Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
顯示 sin ont img root png ima pan 如果 在.vue文件中引入了 element-ui 的 table 和 pagination 組件後，報錯：Component template should contain exactly one root
vue-cli3 的 [Vue warn]: You are using the runtime-only build of Vue where the template compiler 的問題解決
最近使用vue-cli3的腳手架生成專案，發現從配置完後vue-router的出現一個錯誤， [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not avai