Vue单文件的template标签

Question

单文件中用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>

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

Answer 1

组件只能有一个根元素,就是你这了第一个<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>

Answer 2

补充一些：
1.template本身没有很特别的意义，可以了解下html 的template标签
2.官网以及其他人所描述的“根元素”，是指template标签下的元素，不包括也不是template本身
3.经常2个错误：

Component template should contain exactly one root element.
例子：

<template>
    <div>1</div>
    <div>2</div>
</template>

如上面所说：根元素是指template里面第一层的同级元素，这里同级元素有2个，也就是有2个根元素了（根元素就是那两个div）。
tempalate下面第一层同级元素只能有一个，即所谓的只能有一个根元素

Cannot use <template> as component root element because it may contain multiple nodes.

这个错就是题主的错误，这个错误的意思是template下面不能使用template来做根元素，因为template本身就不能够保证不犯上面的错误。

举个例子：不是说根元素只允许一个吗，那我再用个template来做根元素不就好了，比如

<template>
    <template>
        ...
    </template>
</template>

不好意思，NO！因为你本身就不能保证这个用来做根元素的template它自己只有一个根元素，也就是第二个template里的“...”不一定只有一个根元素，这是vue不允许的。

题主就是第二个错误：题主想用template来做一个根元素，但是这个template里面有label和input 两个同级元素了，也就是不只一个根元素了。

note：当然，template下面第一层同级元素只允许一个只是针对根元素来讲的，当里面嵌套的template已经和根元素没什么关系了，就可以为所欲为！
例子：

<template>
  <div>
    <template>
      <template>
        232432
      </template>
    </template>
  </div>
</template>

如有不对，请指正^_^

Answer 3

组件必须有且只有一个根元素