Vue.js中组件的我的模板不工作？

我的

数据

在使用

v-for

此代码

const-roomsComponent=Vue.extend({
数据：函数（）{
返回{
房间：[
{id:“001”，名称：“PHP”，描述：“Entusiatas PHP”}，
{id:“002”，名称：“Java”，描述：“Entusiatas Java”}，
{id:“003”，名称：“C#”，描述：“Entusiatas C#”}，
{id:“004”，名称：“C++”，描述：“Entusiatas C++”}，
{id:“005”，名称：“Javascript”，描述：“Entusiatas Javascript”}，
{id:“006”，名称：“Vue.js”，描述：“Entusiastas Vue.js”}
]
};
},
模板：`
{{o.name}}
{{o.description}}
`
});
var componentTest=Vue.extend({
模板：“测试”
});
var路由器=新的VueRouter({
路线：[
{路径：'/chat'，组件：componentTest}，
{路径：'/room'，组件：roomsComponent}
]
});
新Vue({
el:“#应用程序”，
路由器:路由器,，
模板：“”
});

用另一个

将代码包装到模板中。在

标记中应该只有一个元素，因为您使用的是循环，所以将呈现多个元素

<div class="row">
  <div class="col-md-4" v-for="o in rooms">
     ...
  </div>
</div>

...

<div class="row">
  <div class="col-md-4" v-for="o in rooms">
     ...
  </div>
</div>