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包含所有的模板内容。