通过接口拿到v-for遍历数组进行渲染后，点击返回当前索引项数据，并在其他页面使用当前点击的索引项返回的值

 场景：充值之后生成的充值记录列表，点击任一条充值记录，进入到当前点击项的交易明细页面。

目录

 1. 在充值记录页面调接口拿数据

 2. v-for 遍历渲染数据，给li标签@click绑定点击事件

 3. 通过item获取当前点击项的所有属性值

 4. 在充值明细页面使用通过路由传来的参数值

 5. 案例页面展示

1. 在充值记录页面调接口拿数据

通过后端提供的接口获取数据，拿到的是数组对象格式

async getAllRecord () {
  try {
    const { data } = await record() // record是接口名
    this.list = data          // 把拿到的数据存到自己定义的数组内
    if (this.list.length) {
      this.loading = false; // vant的方法，加载状态结束
    }
    this.finished = true;
    console.log(this.list);
  } catch (err) {
    this.$toast('获取充值记录失败')
  }

编辑

 2. v-for 遍历渲染数据，给li标签@click绑定点击事件

<li
  v-for="item in list"   // list是在data里定义好的数组
  :key="item.name"  // ke值随便写
  @click="getItem(item)" // 在li标签绑定点击事件，这样每一项都可以单独触发
>

 3. 通过item获取当前点击项的所有属性值

当点击任意一项时返回当前点击的这一项的所有数据。并在其他页面展示当前项数据

getItem (item) {
  console.log(item);  // 返回当前点击的item项
  this.$router.push({  // 通过路由把需要的值传到其他页面使用
    name: 'jiaoyimingxi',
    query: {
      money: item.money,
      time: item.time,
    }
  })
},

4. 在充值明细页面使用通过路由传来的参数值

money: this.$route.query.paymoney, // 充值金额
time: this.$route.query.addtime, // 充值时间

 5. 案例页面展示