[英]My template for component in Vue.js not working?
我的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>'
});
使用另一個<div>
將代碼包裝在您的模板中。 <template>
標簽內應該只有 1 個元素,並且由於您使用的是循環,因此將呈現多個元素
<div class="row">
<div class="col-md-4" v-for="o in rooms">
...
</div>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.