我在 Vue.js 中的组件模板不起作用？答案

【问题标题】：My template for component in Vue.js not working?我在 Vue.js 中的组件模板不起作用？
【发布时间】：2020-04-09 04:04:55
【问题描述】：

我的data不在使用v-for时

这段代码

const roomsComponent = Vue.extend({
data: function () {
    return {
        rooms : [
            {id : "001", name : "PHP", description : "Entusiatas PHP"},
            {id : "002", name : "Java", description : "Entusiatas Java"},
            {id : "003", name : "C#", description : "Entusiatas C#"},
            {id : "004", name : "C++", description : "Entusiatas C++"},
            {id : "005", name : "Javascript", description : "Entusiatas Javascript"},
            {id : "006", name : "Vue.js", description : "Entusiastas Vue.js"}
        ]
    };
},
template: `
    <div class="col-md-4" v-for="o in rooms">
        <div class="card">
            <div class="card-header">
                {{ o.name }}
            </div>
            <div class="card-body">
                {{ o.description }}
            </div>
        </div>
    </div>`
});
var componentTest = Vue.extend({
template : "<h1>Test</h1>"
});
var router = new VueRouter({
routes: [
    {path: '/chat', component: componentTest},
    {path: '/room', component: roomsComponent}
]
});

new Vue({
el: '#app',
router: router,
template: '<router-view></router-view>'
});

【问题讨论】：

标签： vue.js vuejs2 vue-component vue-router

【解决方案1】：

用另一个<div> 将代码包装在您的模板中。 <template> 标签内应该只有 1 个元素，并且由于您使用的是循环，因此将呈现多个元素

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

【讨论】：