Estoy usando componentes de vuejs, tengo un template
llamado slider
y dentro un v-for
que recorre un arreglo de noticias.
Pero me da el siguiente error:
Este es el archivo app.js
Vue.component('slider', {
template: `
<div>
<div v-for="noticia in arrayNoticias" class="item-slider" style="background:url('https://i.imgur.com/Ort6NMU.jpg');">
<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>
</div>
`,
});
let app = new Vue({
el: '#layout',
data() {
return {
arrayNoticias: [],
loading: true,
errored: false
}
},
methods : {
listarNoticias(){
axios.get('/posts')
.then(response => {
this.arrayNoticias = response.data
})
.catch(error => {
console.log(error)
this.errored = true
}).finally(() => this.loading = false)
},
},
mounted() {
this.listarNoticias();
},
});
index.php
<div id="layout"> <slider ></slider> </div>
Estos son los CDN que estoy usando
https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js https://unpkg.com/axios/dist/axios.min.js
y para hacer la referencia al archivo app.js assets/js/app.js