使用van-picker?動態(tài)設置當前選中項

更新時間：2022年10月13日 15:25:41 作者：codezha

這篇文章主要介紹了使用van-picker?動態(tài)設置當前選中項方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

van-picker 動態(tài)設置當前選中項

使用vant-field和van-picker、van-popup組合實現(xiàn)單選類型表單時，通常我們需要pick每次顯示時，默認選中的是當前有效值，但往往會出現(xiàn)這樣的情況

我們可以在沒法顯示picker的時候，動態(tài)設置當前選中項，代碼示例如下

//pick中指定ref屬性為myPicker
//currentIndex為當前有效值對應的索引值
this.$refs.myPicker.setColumnIndex(0, currentIndex)

setColumnIndex有兩個參數(shù)，第一個參數(shù)columnIndex代表的是列索引值，如果不涉及多列聯(lián)動，默認為0；第二個參數(shù)optionIndex代表的要設置的有效索引值

van-picker 選擇器空白問題

van-picker綁定的數(shù)據(jù)實在store里，在store里數(shù)據(jù)格式也是正確的，但是到頁面里picker的選擇項就是全空白，

在該路由中將該組件的keepalive設為了true,所以從別的頁面回來的時候，picker綁定的數(shù)據(jù)不會重新獲取，而該組件在初始的created里將picker的數(shù)據(jù)項寫為了空數(shù)組，此時只需要在activated生命周期里重新給picker綁定的數(shù)據(jù)重新進行取值操作即可。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue?中?Promise?的then方法異步使用及async/await?異步使用總結
then?方法是?Promise?中?處理的是異步調(diào)用，異步調(diào)用是非阻塞式的，在調(diào)用的時候并不知道它什么時候結束，也就不會等到他返回一個有效數(shù)據(jù)之后再進行下一步處理，這篇文章主要介紹了Vue?中?Promise?的then方法異步使用及async/await?異步使用總結,需要的朋友可以參考下
2023-01-01
vue實現(xiàn)盒子內(nèi)拖動方塊移動的示例代碼
這篇文章主要給大家介紹了如何通過vue實現(xiàn)盒子內(nèi)拖動方塊移動,文章通過代碼示例講解的非常詳細,具有一定的參考價值,感興趣的小伙伴可以參考閱讀本文
2023-08-08
vue鼠標懸停事件監(jiān)聽實現(xiàn)方法
頁面在鼠標懸停(不動)n秒之后,頁面進行相應的事件,下面這篇文章主要給大家介紹了關于vue鼠標懸停事件監(jiān)聽的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-09-09
Vue中Pinia的各種詳細說明和使用示例
Pinia是Vue 3的專屬狀態(tài)管理庫,旨在替代Vuex,提供更簡單、直觀的狀態(tài)管理解決方案,它支持組合式API和選項式API,允許跨組件或頁面共享狀態(tài),避免了Vuex中的許多復雜概念,本文介紹Vue中Pinia的各種詳細說明和使用示例,感興趣的朋友一起看看吧
2025-01-01
vue父子組件相互通信方法示例梳理總結
這篇文章主要為大家介紹了vue父子組件相互通信方式示例梳理總結，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-05-05
vue中的eventBus會不會產(chǎn)生內(nèi)存泄漏你知道嗎
這篇文章主要為大家詳細介紹了vue中的eventBus會不會產(chǎn)生內(nèi)存泄漏，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-02-02
Vue3之父子組件異步props數(shù)據(jù)的傳值方式
這篇文章主要介紹了Vue3之父子組件異步props數(shù)據(jù)的傳值方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2025-04-04
vue結合element-ui使用示例
這一篇主要是創(chuàng)建一個vue項目并結合餓了么框架element-ui的文章。文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-01-01
VUE中對object.object和object[object]的使用解讀
這篇文章主要介紹了VUE中對object.object和object[object]的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
vue+elementUI如何實現(xiàn)頂部路由標簽跳轉
這篇文章主要介紹了vue+elementUI如何實現(xiàn)頂部路由標簽跳轉問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03