elementui時間日期選擇器el-date-picker報錯Prop?being?mutated:"placement"如何解決

這篇文章主要介紹“elementui時間日期選擇器el-date-picker報錯Prop being mutated:"placement"如何解決”，在日常操作中，相信很多人在elementui時間日期選擇器el-date-picker報錯Prop being mutated:"placement"如何解決問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”elementui時間日期選擇器el-date-picker報錯Prop being mutated:"placement"如何解決”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

發(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"

這個報錯并沒有影響實(shí)際操作，但是看著很難受

解決

根據(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)致了報錯

老項目沒有報錯是因?yàn)榘姹局衟rops中沒有placement，只有created的時候 placement 有個賦值操作，所有不會有報錯

因?yàn)槲业倪@個bug報錯只在 2.15.9 中有。并沒有影響實(shí)際操作看不過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的

因?yàn)榘惭b其他東西出現(xiàn)問題把package-lock.json 和node_modules 都刪了，然后npm install 結(jié)果坑的是package.json版本和實(shí)際安裝的不是一個版本，不然不會出現(xiàn)這個問題

還是需要單獨(dú)npm install element-ui@2.12.0 -s

啊，又是被坑的一天，對你有幫助記得點(diǎn)個贊

補(bǔ)充：el-date-picker 初始化報錯

在點(diǎn)擊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

因?yàn)槲耶?dāng)前的類型是daterange是個數(shù)組

，他默認(rèn)初始化是為0所有會報類型錯誤，而且default-time并不會將其代替，所有 需要手動解決一下，在組件上先判斷一下，當(dāng)前是否為null ，如果是0就返回一個空數(shù)組，如果不是0就返回當(dāng)前數(shù)據(jù)

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

到此，關(guān)于“elementui時間日期選擇器el-date-picker報錯Prop being mutated:"placement"如何解決”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！