element?ui時間日期選擇器el-date-picker報錯Prop?being?mutated:"placement"解決方式
發(fā)現(xiàn)錯誤
這兩天在寫新項目的時候,遇到了element ui 時間日期選擇器一直報錯
[Vue warn]: Avoid mutating a prop directly since the value will be
overwritten whenever the parent component re-renders.
Instead, use a data or computed property based on the prop's value.
Prop being mutated: "placement"
這個報錯并沒有影響實際操作,但是看著很難受
解決
根據(jù)報錯顯示是element ui data-picker 下的picker文件報錯的,我這邊在node_modules 中找到這個vue文件發(fā)現(xiàn)
props值中有加一個placement: Popper.props.placement,
created的時候 placement 有個賦值操作 this.placement = PLACEMENT_MAP[this.align] || PLACEMENT_MAP.left;這樣就導(dǎo)致了報錯
老項目沒有報錯是因為版本中props中沒有placement,只有created的時候 placement 有個賦值操作,所有不會有報錯
因為我的這個bug報錯只在 2.15.9 中有。并沒有影響實際操作看不過error 報錯的可以將版本降至 2.15.9以下就可以了
公司項目都是用的2.12版本的,所以直接npm install element-ui@2.12.0 -s
可以看看element ui git https://github.com/ElemeFE/element/issues/21905
剛開始報錯的時候還沒有意識到版本問題,后來老項目看到node_modules 中picker.vue 和現(xiàn)在用的不一樣的時候才發(fā)現(xiàn)是版本問題,本身我的package.json里面element ui顯示的版本是2.12的
因為安裝其他東西出現(xiàn)問題把package-lock.json 和node_modules 都刪了,然后npm install 結(jié)果坑的是package.json版本和實際安裝的不是一個版本,不然不會出現(xiàn)這個問題
還是需要單獨npm install element-ui@2.12.0 -s
啊,又是被坑的一天,對你有幫助記得點個贊
補充:el-date-picker 初始化報錯
在點擊el-date-picker組件自帶的
x初始化后,提交數(shù)據(jù)報錯
Error in event handler for “click”: “TypeError: Cannot read property ‘0’ of null”
Cannot read property ‘0’ of null
因為我當前的類型是daterange是個數(shù)組
,他默認初始化是為0所有會報類型錯誤,而且default-time并不會將其代替,所有 需要手動解決一下,在組件上先判斷一下,當前是否為null ,如果是0就返回一個空數(shù)組,如果不是0就返回當前數(shù)據(jù)
v-if="timeRange === null ? timeRange = [] : timeRange = timeRange"
總結(jié)
到此這篇關(guān)于element ui時間日期選擇器el-date-picker報錯Prop being mutated:"placement"解決的文章就介紹到這了,更多相關(guān)element ui時間日期選擇器報錯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue 使用element-ui中的Notification自定義按鈕并實現(xiàn)關(guān)閉功能及如何處理多個通知
這篇文章主要介紹了vue 使用element-ui中的Notification自定義按鈕并實現(xiàn)關(guān)閉功能及如何處理多個通知,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08vue實現(xiàn)錨點跳轉(zhuǎn)scrollIntoView()使用案例
這篇文章主要介紹了vue實現(xiàn)錨點跳轉(zhuǎn)scrollIntoView()使用案例,文中結(jié)合實例代碼介紹了vue錨點跳轉(zhuǎn)的三種方式(頁內(nèi)跳轉(zhuǎn),跨頁跳轉(zhuǎn),函數(shù)跳轉(zhuǎn)),需要的朋友可以參考下2023-07-07VUE DEMO之模擬登錄個人中心頁面之間數(shù)據(jù)傳值實例
今天小編就為大家分享一篇VUE DEMO之模擬登錄個人中心頁面之間數(shù)據(jù)傳值實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10vue實現(xiàn)codemirror代碼編輯器中的SQL代碼格式化功能
這篇文章主要介紹了vue實現(xiàn)codemirror代碼編輯器中的SQL代碼格式化功能,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08vue中使用js-xlsx導(dǎo)出excel的實現(xiàn)方法
本文主要介紹了vue中使用js-xlsx導(dǎo)出excel的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-02-02vue點擊按鈕跳轉(zhuǎn)到另一個vue頁面實現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue點擊按鈕跳轉(zhuǎn)到另一個vue頁面的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08vue中后端做Excel導(dǎo)出功能返回數(shù)據(jù)流前端的處理操作
這篇文章主要介紹了vue中后端做Excel導(dǎo)出功能返回數(shù)據(jù)流前端的處理操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09