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