mpvue小程序中v-for同一接口实现循环嵌套

最新推荐文章于 2026-04-23 04:52:17 发布

原创最新推荐文章于 2026-04-23 04:52:17 发布 · 773 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

小程序专栏收录该内容

2 篇文章

订阅专栏

在mpvue小程序开发中，遇到v-for循环嵌套时，未使用index导致错误。解决办法是重新定义第二个循环的index，从而成功实现循环嵌套功能。

在这里插入图片描述
在使用mpvue开发小程序时，嵌套使用v-for循环，没用到index索引，报错：
同一组件内嵌套的 v-for 不能连续使用相同的索引,目前为: index,index

解决方法:

重新定义第二个for循环中的index就可以啦

    <div class="item" v-for="(item,index) in tableData" :key="index">
        <div class="introduce">
          <div class="title">{{item.title}}</div>
          <span>{{item.intro}}</span>
        </div>
        <div class="item_img">
          <div v-for="(items,indexs) in item.goods" :key="indexs">
            <img :src="items.thumb" alt>
          </div>
        </div>
        <div class="godetail">查看详情</div>
      </div>