使用van-picker 动态设置当前选中项

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

这篇文章主要介绍了使用van-picker 动态设置当前选中项方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

van-picker 动态设置当前选中项

使用vant-field和van-picker、van-popup组合实现单选类型表单时，通常我们需要pick每次显示时，默认选中的是当前有效值，但往往会出现这样的情况

我们可以在没法显示picker的时候，动态设置当前选中项，代码示例如下

//pick中指定ref属性为myPicker
//currentIndex为当前有效值对应的索引值
this.$refs.myPicker.setColumnIndex(0, currentIndex)

setColumnIndex有两个参数，第一个参数columnIndex代表的是列索引值，如果不涉及多列联动，默认为0；第二个参数optionIndex代表的要设置的有效索引值

van-picker 选择器空白问题

van-picker绑定的数据实在store里，在store里数据格式也是正确的，但是到页面里picker的选择项就是全空白，

在该路由中将该组件的keepalive设为了true,所以从别的页面回来的时候，picker绑定的数据不会重新获取，而该组件在初始的created里将picker的数据项写为了空数组，此时只需要在activated生命周期里重新给picker绑定的数据重新进行取值操作即可。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue 中 Promise 的then方法异步使用及async/await 异步使用总结
then 方法是 Promise 中处理的是异步调用，异步调用是非阻塞式的，在调用的时候并不知道它什么时候结束，也就不会等到他返回一个有效数据之后再进行下一步处理，这篇文章主要介绍了Vue 中 Promise 的then方法异步使用及async/await 异步使用总结,需要的朋友可以参考下
2023-01-01
vue实现盒子内拖动方块移动的示例代码
这篇文章主要给大家介绍了如何通过vue实现盒子内拖动方块移动,文章通过代码示例讲解的非常详细,具有一定的参考价值,感兴趣的小伙伴可以参考阅读本文
2023-08-08
vue鼠标悬停事件监听实现方法
页面在鼠标悬停(不动)n秒之后,页面进行相应的事件,下面这篇文章主要给大家介绍了关于vue鼠标悬停事件监听的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-09-09
Vue中Pinia的各种详细说明和使用示例
Pinia是Vue 3的专属状态管理库,旨在替代Vuex,提供更简单、直观的状态管理解决方案,它支持组合式API和选项式API,允许跨组件或页面共享状态,避免了Vuex中的许多复杂概念,本文介绍Vue中Pinia的各种详细说明和使用示例,感兴趣的朋友一起看看吧
2025-01-01
vue父子组件相互通信方法示例梳理总结
这篇文章主要为大家介绍了vue父子组件相互通信方式示例梳理总结，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
vue中的eventBus会不会产生内存泄漏你知道吗
这篇文章主要为大家详细介绍了vue中的eventBus会不会产生内存泄漏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02
Vue3之父子组件异步props数据的传值方式
这篇文章主要介绍了Vue3之父子组件异步props数据的传值方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-04-04
vue结合element-ui使用示例
这一篇主要是创建一个vue项目并结合饿了么框架element-ui的文章。文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-01-01
VUE中对object.object和object[object]的使用解读
这篇文章主要介绍了VUE中对object.object和object[object]的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
vue+elementUI如何实现顶部路由标签跳转
这篇文章主要介绍了vue+elementUI如何实现顶部路由标签跳转问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03