使用v-for遍历报错Cannot use v-for on stateful component root element because it renders multiple elements.

Shirley~~

于 2023-05-05 15:45:09 发布

阅读量511

点赞数

文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_45866961/article/details/130508284

版权

在使用v-for遍历报错时，报错Cannot use v-for on stateful component root element because it renders multiple elements.
意思是不能再根元素上使用v-for遍历，因为他会渲染多个元素

错误代码

<template>
  <div class="spec-preview" v-for="skuimage in skuImageList" :key="skuimage.id">
    <img :src="skuimage[0].imgUrl" />
    <div class="event"></div>
    <div class="big">
      <img :src="skuimage[0].imgUrl" />
    </div>
    <div class="mask"></div>
  </div>
</template>

解决办法：可以在代码外面包围一个div盒子

<template>
  <div>
    <div class="spec-preview" v-for="skuimage in skuImageList" :key="skuimage.id">
        <img :src="skuimage[0].imgUrl" />
        <div class="event"></div>
        <div class="big">
          <img :src="skuimage[0].imgUrl" />
        </div>
        <div class="mask"></div>
    </div>
  </div>
</template>