Vant?Weapp組件picker選擇器初始默認(rèn)選中問(wèn)題
Vant Weapp組件picker選擇器初始默認(rèn)選中
小程序使用vant-picker多列數(shù)據(jù)級(jí)聯(lián)選擇設(shè)置初始默認(rèn)選中通過(guò)this.xx修改對(duì)應(yīng)列defaultIndex的不生效，數(shù)據(jù)改變頁(yè)面未渲染
解決
在onReady()方法中通過(guò)selectComponent方法獲取picker實(shí)例再調(diào)用官方文檔的setColumnIndex方法
注：wepy中獲取組件實(shí)例寫法為this.$wxpage.selectComponent()
代碼示例：
<van-picker
? ? ? ? class="labelPicker"
? ? ? ? show-toolbar
? ? ? ? title="選擇我的標(biāo)簽"
? ? ? ? columns="{{ columns }}"
? ? ? ? bind:cancel="onLabelCancel"
? ? ? ? bind:confirm="onLabelConfirm"
? ? ? ? bind:change="onLabelTypeChange"
? ? ? />onReady () {
? ? ? dept.forEach(item => {
? ? ? ? if (item.dept_bm === this.deptCode) {
? ? ? ? ? const picker = this.$wxpage.selectComponent('.labelPicker') // 獲取組件實(shí)例
? ? ? ? ? picker.setColumnIndex(0, dept.indexOf(item))
? ? ? ? }
? ? ? })
? ? }Van-picker選擇器空白
van-picker綁定的數(shù)據(jù)實(shí)在store里，在store里數(shù)據(jù)格式也是正確的，但是到頁(yè)面里picker的選擇項(xiàng)就是全空白，
在該路由中將該組件的keepalive設(shè)為了true,所以從別的頁(yè)面回來(lái)的時(shí)候，picker綁定的數(shù)據(jù)不會(huì)重新獲取，而該組件在初始的created里將picker的數(shù)據(jù)項(xiàng)寫為了空數(shù)組，此時(shí)只需要在activated生命周期里重新給picker綁定的數(shù)據(jù)重新進(jìn)行取值操作即可。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解mpvue scroll-view自動(dòng)回彈bug解決方案
設(shè)置了scroll-top的scroll-view組件，在組件所在vue實(shí)例data發(fā)生改變時(shí)會(huì)自動(dòng)回彈到最上方，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-10-10
在vue框架下使用指令vue add element安裝element報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了在vue框架下使用指令vue add element安裝element報(bào)錯(cuò)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
本文主要介紹了vue 面包屑導(dǎo)航組件封裝，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
vue實(shí)現(xiàn)web滾動(dòng)條分頁(yè)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)web滾動(dòng)條分頁(yè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了antd form表單中如何嵌套自定義組件問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
基于Vue2實(shí)現(xiàn)的仿手機(jī)QQ單頁(yè)面應(yīng)用功能(接入聊天機(jī)器人 )
這篇文章主要介紹了基于Vue2實(shí)現(xiàn)的仿手機(jī)QQ單頁(yè)面應(yīng)用功能(接入聊天機(jī)器人 ),非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
vuex+axios+element-ui實(shí)現(xiàn)頁(yè)面請(qǐng)求loading操作示例
這篇文章主要介紹了vuex+axios+element-ui實(shí)現(xiàn)頁(yè)面請(qǐng)求loading操作,結(jié)合實(shí)例形式分析了vuex+axios+element-ui實(shí)現(xiàn)頁(yè)面請(qǐng)求過(guò)程中l(wèi)oading遮罩層相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下2020-02-02
詳解vue與后端數(shù)據(jù)交互(ajax)：vue-resource
本篇文章主要介紹了詳解vue與后端數(shù)據(jù)交互(ajax)：vue-resource，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
this.$emit()的作用大家應(yīng)該也都知道,主要用于子組件像父組件傳值,這篇文章主要給大家介紹了關(guān)于vue中this.$emit使用方法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
vue3引入uview-plus3.0移動(dòng)組件庫(kù)的流程
這篇文章主要介紹了vue3引入uview-plus3.0移動(dòng)組件庫(kù)的流程,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06