在vue.js的官方文档中,组件部分的介绍实例为如下:
但是运行时出现错误提示:
//定义组件部分
Vue.component('todo-item', {
// todo-item 组件现在接受一个
// "prop",类似于一个自定义特性。
// 这个 prop 名为 todo。
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
//调用该组件的vue中的template为:
<ol>
<!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量,即其内容可以是动态的。
我们也需要为每个组件提供一个“key”,稍后再
作详细解释。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
//调用该组件的vue中的vue实例中的data为:
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
上述实例中将循环放在了组件上,而不是组件内部的template中。传入template的为groceryList的每一项。
尝试在调用<todo-item>时放入总的数据,grocery List,然后在组件上进行循环,代码如下:
调用组件的vue的template中向
<ol>
<todo-item v-bind:todo="groceryList"></todo-item>
</ol>
//定义组件中
Vue.component("todo-item",{
props:['todo'],
template:`<li v-for="item in todo">{{item.text}}</li>`
})
但是运行时出现错误提示:
[Vue warn]: Error compiling template:
li v-for="item in todo">{{item.text}}/li>
- Cannot use v-for on stateful component root element because it renders multiple elements.
上述提示说明:在根元素上不能使用V-for ,因为v-for会进行循环,返回多个<li></li>。而在组件中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>
而直接在<li>上进行v-for循环,则会变成下列形式
<template>
<li></li>
<li></li>
</template>
所以会报错。如果想要在li上进行循环,可以在定义组件的template时,在li外层包裹一个标签。
Vue.component("todo-list",{
props:['todo'],
template:`<ol><li v-for="item in todo">{{item.text}}</li></ol>`
})
其他不用更改,即可实现。