vue,template标签

hhxx
  • 569

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

<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都是两个数组

回复
阅读 8.2k
2 个回答
夜猫
  • 2
新手上路,请多包涵

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏