vue组件 子组件的模板直接使用v-for无法渲染

Question

在创建自己组件的时候，template中直接使用v-for指令无法渲染，以下是错误代码：Vue.component('component-test',{
    props: {
      testData: {
        type: Array,
        default: []
      }
    },
    template: '<li v-for="(item,index) in testData">{{item}}</li>' //这里直接使用v-for指令，后页面无法渲染出元素。
})使用watch发现testData已经传到子组件了，然而页面对应的元素没有渲染出来，此时，如果给li前面加上ul的话就可以渲染的出来，下面为正确代码：Vue.component('component-test',{
    props: {
      testData: {
        type: Array,
        default: []
      }
    },
    template: '<ul><li v-for="(item,index) in testData">{{item}}</li></ul>' //在v-for对应的元素前面加一个父元素
  })此时问题是解决了，但是这其中的原理是怎样的呢？为什么直接在template使用v-for指令无法渲染呢？哪位大神能够解答一下，感谢！！！

Answer 1

template里必须提供根元素

Answer 2

最外层用一个div包裹起来才行

Answer 3

只能有一个根元素，你for出来就不只一个根了，所以只能在外面套一个父元素

Answer 4

template里需要一个根元素，没有根元素肯定会报错

Answer 5

按w3c的标准，li只能在 dir, menu, ol, ul 中使用。请及时结帖。