后台返回的数据中一个对象包含4个数组，里面的一个数组包含4个对象怎么v-for去渲染

原创已于 2024-01-09 11:43:50 修改 · 427 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#css #javascript #前端

于 2024-01-09 11:00:05 首次发布

文章描述了一个游戏后端返回的请求函数，涉及用户在用户爱Manor中的礼物赠送功能，包括礼物列表、经验值计算以及排行榜信息。开发者获取了用户的排名、等级奖励等数据，用于游戏内激励系统设计。

<div class="followingGift">
            <div class="text" style="margin-top: 32px">(2)向对方赠送以下礼物可额外获得经验值</div>
            <table>
              <tr style="height: 30px;">
                <td>礼物</td>
                <td>获得经验值</td>
              </tr>
              <tr v-for="(item,key) in expGiftTreemapShow" :key="key">
                  <td>
                    <div class="td-container">
                      <div class="expGiftTable" v-for="(expGiftShow) in item" :key=expGiftShow.propId>
                        <img :src="expGiftShow.pic">
                        <div class="expGiftName">{{ expGiftShow.name }}</div>
                        <div class="expGiftCoins">
                          <img :src="resource.coin">
                          <span>{{ expGiftShow.price }}</span>
                        </div>
                      </div>
                    </div>
                  </td>
                  <td>{{key}}</td>
              </tr>
            </table>
            <div class="empty"></div>
          </div>

这是后台的返回请求函数

  async init() {
      // 开始活动逻辑
      const res = await this.$req('/UserLoveManor.RankingInfo')
      if (res) {
        this.rankingShow = 'Lv.' + res.data.ranking
        this.rankingName = res.data.rankingName
        this.gradeValue = res.data.startNum
        this.totalExp = res.data.totalExp
        this.rewards = res.data.rewards
        this.expGiftTreemap = res.data.expGiftTreemap
        this.expGiftTreemapShow = res.data.expGiftTreemap
        this.showInfoList = res.data.showInfoList
        for (let i = 0; i < res.data.rewards.length; i++) {
          this.rewards.price = res.data.rewards[i].price
          this.rewards.name = res.data.rewards[i].name
        }
      }
    },
  }