vue,template标签

Question

请问下面两个代码，为什么第二个代码无法正常运行

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


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

还有两个不明白的：

<selector v-for="branch in branches" :branch="branch"></selector>
<message v-for="ciinfo in ciinfos" :ciinfo="ciinfo"></message>

js:
Vue.component('message', {
  props: ['ciinfo'],
  
  template: `<li>
          <p> {{ciinfo.sha}} {{ ciinfo.message }}</p>
          <p>by {{ ciinfo.name }} at {{ ciinfo.date }}</p>
        </li>
        `
})

Vue.component('selector', {
  props: ['branch'],

  template: `<input type="radio"
      :id="branch"
      :value="branch"
      name="branch">
    <label :for="branch">{{ branch }}</label>
    `
})

结果selector，报错了：
warn — vue.js:513[Vue warn]: Component template should contain exactly one root element
请问为什么啊，感觉完全一样啊，branches和ciinfos都是两个数组

Answer 1

第二个的branch压根没在v-for的作用域内。

Answer 2

模板只能有一个根对象

`Vue.component('selector', {
  props: ['branch'],
  template: <input type="radio"
      :id="branch"
      :value="branch"
      name="branch">
    <label :for="branch">{{ branch }}</label>
})`

那么这里就出现问题了 <input>一个标签 label一个标签