vue.js - Vue单文件的template标签

问题描述

问 题

单文件中用template标签包含html模板内容，但我现在要用一个template标签+v-for来包含多个元素，此时webpack编译时报错了.

下面是vue文件部分内容:

<template>
    <template v-for="branch in branches">
        <label :for="branch">{{ branch }}</label>
        <input type="radio" :name="branch" :value="branch" v-model="currentBranch">
    </template>
</template>

报错内容为:

ERROR in ./~/vue-loader/lib/template-compiler.js?id=data-v-556c4717!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/xxx.vue
template syntax error Cannot use <template> as component root element because it may contain multiple nodes:
<template v-for="branch in branches">
    <label for="branch">{{ branch }}</label>
    <input type="radio" :name="branch" :value="branch" v-model="currentBranch">
</template>

本人小白，希望大家帮助一下谢谢！！

解决方案

组件只能有一个根元素,就是你这了第一个<template></template>下面必须只有一个根元素,可以使用一个容器元素包裹住,例如:

<template>
    <div>
        <template v-for="branch in branches">
            <label :for="branch">{{ branch }}</label>
            <input type="radio" :name="branch" :value="branch" v-model="currentBranch">
        </template>
    </div>
</template>

这篇关于vue.js - Vue单文件的template标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！