element ui時間日期選擇器el-date-picker報錯Prop being mutated:"placement"解決方式

2022-08-17 14:00:24

發現錯誤

這兩天在寫新專案的時候，遇到了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"

這個報錯並沒有影響實際操作，但是看著很難受

解決

根據報錯顯示是element ui data-picker 下的picker檔案報錯的，我這邊在node_modules 中找到這個vue檔案發現

props值中有加一個placement: Popper.props.placement,
created的時候 placement 有個賦值操作 this.placement = PLACEMENT_MAP[this.align] || PLACEMENT_MAP.left;這樣就導致了報錯

老專案沒有報錯是因為版本中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 和現在用的不一樣的時候才發現是版本問題，本身我的package.json裡面element ui顯示的版本是2.12的

因為安裝其他東西出現問題把package-lock.json 和node_modules 都刪了，然後npm install 結果坑的是package.json版本和實際安裝的不是一個版本，不然不會出現這個問題

還是需要單獨npm install element-ui@2.12.0 -s

啊，又是被坑的一天，對你有幫助記得點個贊

補充：el-date-picker 初始化報錯

在點選el-date-picker元件自帶的

x初始化後，提交資料包錯

Error in event handler for “click”: “TypeError: Cannot read property ‘0’ of null”
Cannot read property ‘0’ of null

因為我當前的型別是daterange是個陣列

，他預設初始化是為0所有會報型別錯誤，而且default-time並不會將其代替，所有需要手動解決一下，在元件上先判斷一下，當前是否為null ，如果是0就返回一個空陣列，如果不是0就返回當前資料

v-if="timeRange === null ? timeRange = [] : timeRange = timeRange"

總結

到此這篇關於element ui時間日期選擇器el-date-picker報錯Prop being mutated:"placement"解決的文章就介紹到這了,更多相關element ui時間日期選擇器報錯內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

element ui時間日期選擇器el-date-picker報錯Prop being mutated:"placement"解決方式

目錄

發現錯誤

解決

補充：el-date-picker 初始化報錯

總結

熱門文章