Cannot use v-for on stateful component root element because it renders multiple elements

问题代码

<template>
    <Tag v-for="dict in dicts" :key="`dict-tag-${dict.dictId}`" :name="dict.value" @click="handleChange(dict)">
        {{ dict.name }}
    </Tag>
</template>

修改后

<template>
    <div>
        <Tag v-for="dict in dicts" :key="`dict-tag-${dict.dictId}`" :name="dict.value" @click="handleChange(dict)">
            {{ dict.name }}
        </Tag>
    </div>
</template>

出错原因

组件template内部只能有一个元素,问题代码v-for循环后会出现多个,所以报错。最直观的解决办法就是在template内直接使用一个div包含所有的模板内容。

猜你喜欢

转载自www.cnblogs.com/codebook/p/12149297.html