难点(动态数据切换管理)

171 阅读1分钟

一. image.png 实现如图功能,在使用的Vant3中的van-tabs组件中,v-model:active绑定的是索引,对象中无法用索引拿值

image.png 要想办法拿到某一组的数据,van-tab中无法绑定原生click事件,想办法拿到key

image.png 可以使用name来拿到 <van-tab :title="value.title" :name="key"></van-tab>

image.png 成功拿到对应的值

//获取选中标签后的数据 const currentGroup = computed(() => allCities.value[tabValue.value]) 需要用computed 当里面的值改变会重新计算 不然两个value都是普通的值 无法响应式

最后 <template v-for="item in currentGroup?.cities">

image.png 成功拿到

二. <template v-for="item in allCities[tabValue]?.cities"> 这种方法可以不使用computed做到响应式