Estoy haciendo un componente llamado slider y tengo una función llamado, listarNoticias, lo que quiero es mostrar las noticias en el slider usando v-for. Pero me da el siguiente error
[Vue warn]: Error compiling template:
Cannot use v-for on stateful component root element because it renders multiple elements.
app.js
Vue.component('slider', {
template: `
<div v-for="noticia in noticias" class="item-slider">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-7">
<div class="info-slider">
<h1> {{ title.rendered }} </h1>
<a href="#" class="btn-iw outline">Leer más <i class="fa fa-long-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</div>
`,
})
new Vue({
el: '#layout',
data() {
return {
noticias: []
}
},
methods : {
listarNoticias(){
let me = this;
var url= '.../wp-json/wp/v2/posts'; //quite la url, para la pregunta
axios.get(url).then(function (response) {
me.noticias = response.data;
})
.catch(function (error) {
console.log(error);
});
},
},
mounted() {
this.listarNoticias();
},
})
En el index tengo lo siguiente
<div id="layout">
<slider></slider>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="assets/js/app.js"></script>