Vue + Node v-for三层循环嵌套渲染数据

后端(node简易版)接口数据：

//分类的接口
router.get('/api/goods/list', function (req, res, next) {
  res.send({
    code: 0,
    data:
      [
        {
          //一级
          id: 0,
          name: '推荐',
          data: [
            {
              //二级
              id: 0,
              name: '推荐',
              list: [
                //三级
                {
                  id: 0,
                  name: '铁观音',
                  imgUrl: './images/list1.jpeg'
                },
                {
                  id: 1,
                  name: '功夫茶具',
                  imgUrl: './images/list1.jpeg'
                },
                {
                  id: 2,
                  name: '茶具电器',
                  imgUrl: './images/list1.jpeg'
                },
                {
                  id: 3,
                  name: '紫砂壶',
                  imgUrl: './images/list1.jpeg'
                },
                {
                  id: 4,
                  name: '龙井',
                  imgUrl: './images/list1.jpeg'
                },
                {
                  id: 5,
                  name: '武夷岩茶',
                  imgUrl: './images/list1.jpeg'
                },
              ]
            }

          ]
        },
        {
          //一级
          id: 1,
          name: '绿茶',
          data: [
            {
              //二级
              id: 1,
              name: '绿茶',
              list: [
                //三级
                {
                  id: 0,
                  name: '龙井绿茶',
                  imgUrl: './images/list1.jpeg'
                },
                {
                  id: 1,
                  name: '碧螺春',
                  imgUrl: './images/list1.jpeg'
                },
                {
                  id: 2,
                  name: '雀舌',
                  imgUrl: './images/list1.jpeg'
                },
                {
                  id: 3,
                  name: '安吉白茶',
                  imgUrl: './images/list1.jpeg'
                },
                {
                  id: 4,
                  name: '六安瓜片',
                  imgUrl: './images/list1.jpeg'
                }
              ]
            }
          ]
        },
      ]
  })
})

List.vue>

 <section ref="wrapper">
      <!-- 左边 -->
      <div class="list-l">
        <ul class="l-item">
          <li class="active" v-for="(item, index) in leftData" :key="index">
            {{ item.name }}
          </li>
        </ul>
      </div>
      <!-- 右边 -->
      <div class="list-r">
        <!-- 数据结构是三层数组嵌套 所以循环三次 -->
        <ul v-for="(item, index) in rightData" :key="index">
          <li v-for="(v, i) in item" :key="i">
            <h2>{{ v.name }}</h2>
            <ul class="r-content">
              <li class="shop-list" v-for="(k, idx) in v.list" :key="idx">
                <img :src="k.imgUrl" alt="" />
                <span>{{ k.name }}</span>
              </li>
            </ul>
          </li>
        </ul>
      </div>
</section>

import http from "@/common/api/request.js";

 data() {
    return {
      leftData: [], //左侧数据
      rightData: [], //右侧数据
    };
  },
  async created() {
    let res = await http.$axios({
      url: "/api/goods/list",
    });
    let leftArr = [];
    let rightArr = [];
    //重构建数组再赋值 循环res:[{…}, {…}, {…}, {…}, {…}, {…}], 使leftArr每一项为一个对象
    res.forEach((v) => {
      leftArr.push({
        id: v.id,
        name: v.name,
      });
      rightArr.push(v.data);
    });
    console.log(leftArr); //[{id: 0, name: '推荐'}, {…}, {…}, {…}, {…}, {…}]
    console.log(rightArr);
    this.leftData = leftArr;
    this.rightData = rightArr;
  },

标签：Node,Vue,name,list1,jpeg,嵌套,images,id,imgUrl
来源： https://blog.csdn.net/weixin_60463255/article/details/121398090