uni.app小程序实现跳转获取数据

最新推荐文章于 2023-07-25 15:45:20 发布

Dummerd

最新推荐文章于 2023-07-25 15:45:20 发布

阅读量343

点赞数

文章标签：小程序微信小程序

本文链接：https://blog.csdn.net/Dummerd/article/details/128257928

版权

式例如上图所示（前提是点击索引获得的id与获得数据的id是一样的）

首先是获取文档的数据

我用的async await来获取数据，也可以用.then方法获取数据

async onLoad() {
			let res = await getOtuhpv()
			this.data = res.data   //全部数据
			this.data1 = this.data[0].hpv_list //获取的6个数据
			console.log(res.data, '全部疫苗');	
		}

给四个按钮一个点击事件，并且获取点击后得到的id 例如

<view class="d-flex j-center a-center text-center my-3 mt-5 " v-for="(item,index) in data" :key="index">
			<view class="span-5 " v-for="(j,index) in item.hpv_select" :key="index" @click="toggle({j},index)">
				<view class="text-center fyy">
					<view>{{j.name}}</view>
					<view :class="index==checked ? 'checked' : ''"></view>
				</view>
			</view>
		</view>

data() {
			return {
				data: [],
				checked: 0,
				data1:[]
			}
		},
		methods: {
			toggle(a, index) {
				// 当前点击的index
				console.log(a.j._id,'a.j._id点击显示的id');
				// this.id = a.j._id
				this.checked = index
				// 点击对应index显示对应hpv疫苗数据
				// if(a.j._id=='26da8e4962dc565503df9629704f1700'){
				if(a.j._id==this.data[0].hpv_select[0]._id){  
                  //当a.j._id==全部按钮的id
					 this.data[0].hpv_list=this.data1   
                     //把6个数据放入this.data[0].hpv_list中
				 }else{
					 this.data[0].hpv_list = this.data1.map((q)=>{
						 return q.hpv_id===a.j._id && q
					  })
					 this.data[0].hpv_list = this.data[0].hpv_list.filter((v)=>v) 
                 //filter默认删除false的数组项
				 }
			},	
			
		},