使用van-picker?動(dòng)態(tài)設(shè)置當(dāng)前選中項(xiàng)
van-picker 動(dòng)態(tài)設(shè)置當(dāng)前選中項(xiàng)
使用vant-field和van-picker、van-popup組合實(shí)現(xiàn)單選類(lèi)型表單時(shí)，通常我們需要pick每次顯示時(shí)，默認(rèn)選中的是當(dāng)前有效值，但往往會(huì)出現(xiàn)這樣的情況
我們可以在沒(méi)法顯示picker的時(shí)候，動(dòng)態(tài)設(shè)置當(dāng)前選中項(xiàng)，代碼示例如下
//pick中指定ref屬性為myPicker //currentIndex為當(dāng)前有效值對(duì)應(yīng)的索引值 this.$refs.myPicker.setColumnIndex(0, currentIndex)
setColumnIndex有兩個(gè)參數(shù)，第一個(gè)參數(shù)columnIndex代表的是列索引值，如果不涉及多列聯(lián)動(dòng)，默認(rèn)為0；第二個(gè)參數(shù)optionIndex代表的要設(shè)置的有效索引值
van-picker 選擇器空白問(wèn)題
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)寫(xiě)為了空數(shù)組，此時(shí)只需要在activated生命周期里重新給picker綁定的數(shù)據(jù)重新進(jìn)行取值操作即可。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue?中?Promise?的then方法異步使用及async/await?異步使用總結(jié)
then?方法是?Promise?中?處理的是異步調(diào)用，異步調(diào)用是非阻塞式的，在調(diào)用的時(shí)候并不知道它什么時(shí)候結(jié)束，也就不會(huì)等到他返回一個(gè)有效數(shù)據(jù)之后再進(jìn)行下一步處理，這篇文章主要介紹了Vue?中?Promise?的then方法異步使用及async/await?異步使用總結(jié),需要的朋友可以參考下2023-01-01
vue實(shí)現(xiàn)盒子內(nèi)拖動(dòng)方塊移動(dòng)的示例代碼
這篇文章主要給大家介紹了如何通過(guò)vue實(shí)現(xiàn)盒子內(nèi)拖動(dòng)方塊移動(dòng),文章通過(guò)代碼示例講解的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴可以參考閱讀本文2023-08-08
vue鼠標(biāo)懸停事件監(jiān)聽(tīng)實(shí)現(xiàn)方法
頁(yè)面在鼠標(biāo)懸停(不動(dòng))n秒之后,頁(yè)面進(jìn)行相應(yīng)的事件,下面這篇文章主要給大家介紹了關(guān)于vue鼠標(biāo)懸停事件監(jiān)聽(tīng)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
Vue中Pinia的各種詳細(xì)說(shuō)明和使用示例
Pinia是Vue 3的專(zhuān)屬狀態(tài)管理庫(kù),旨在替代Vuex,提供更簡(jiǎn)單、直觀的狀態(tài)管理解決方案,它支持組合式API和選項(xiàng)式API,允許跨組件或頁(yè)面共享狀態(tài),避免了Vuex中的許多復(fù)雜概念,本文介紹Vue中Pinia的各種詳細(xì)說(shuō)明和使用示例,感興趣的朋友一起看看吧2025-01-01
這篇文章主要為大家介紹了vue父子組件相互通信方式示例梳理總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
vue中的eventBus會(huì)不會(huì)產(chǎn)生內(nèi)存泄漏你知道嗎
這篇文章主要為大家詳細(xì)介紹了vue中的eventBus會(huì)不會(huì)產(chǎn)生內(nèi)存泄漏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
Vue3之父子組件異步props數(shù)據(jù)的傳值方式
這篇文章主要介紹了Vue3之父子組件異步props數(shù)據(jù)的傳值方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
這一篇主要是創(chuàng)建一個(gè)vue項(xiàng)目并結(jié)合餓了么框架element-ui的文章。文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01![VUE中對(duì)object.object和object[object]的使用解讀](http://img.jbzj.com/images/xgimg/bcimg8.png)
VUE中對(duì)object.object和object[object]的使用解讀
這篇文章主要介紹了VUE中對(duì)object.object和object[object]的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue+elementUI如何實(shí)現(xiàn)頂部路由標(biāo)簽跳轉(zhuǎn)
這篇文章主要介紹了vue+elementUI如何實(shí)現(xiàn)頂部路由標(biāo)簽跳轉(zhuǎn)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03