I'm trying to build small application on Vuejs 2.0 where I'm having component file named Text.Vue and following are the components:
<template>
<!-- Post -->
<div class="blog-item" v-for="item in items">
<!-- Post Title -->
<h2 class="blog-item-title font-alt"><a href="#">{{ item.title }}</a></h2>
<!-- Author, Categories, Comments -->
<div class="blog-item-data">
<a href="#"><i class="fa fa-clock-o"></i> {{ item.created_at }} </a>
<span class="separator"> </span>
<a href="#"><i class="fa fa-user"></i> John Doe</a>
<span class="separator"> </span>
<i class="fa fa-folder-open"></i>
<a href="">Design</a>, <a href="#">Branding</a>
<span class="separator"> </span>
<a href="#"><i class="fa fa-comments"></i> 5 Comments</a>
</div>
<!-- Text Intro -->
<div class="blog-item-body">
<p>
{{ item.content }}
</p>
</div>
<!-- Read More Link -->
<div class="blog-item-foot">
<a href="#" class="btn btn-mod btn-round btn-small">Read More <i class="fa fa-angle-right"></i></a>
</div>
</div>
<!-- End Post -->
</template>
<script>
export default {
data() {
return {
title: 'POST WITH TEXT ONLY',
contents: 'Suspendisse accumsan interdum tellus, eu imperdiet lacus consectetur sed. Aliquam in ligula ac lacus blandit commodo vel luctus quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras eu ultrices mauris.',
date_time: '4 December',
items: []
}
},
beforeCreate() {
axios.get('/Blog/api/posts').then(response => {
if(response.status === 200)
{
this.items = response.data.posts
}
})
}
}
</script>
While doing npm run dev or compiling the asset file I'm getting and error:
- Cannot use v-for on stateful component root element because it renders multiple elements.
I don't know where I'm doing mistake, help me out in this.
Thanks