1

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:

captura

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

1 respuesta 1

2

Estas ocupando arrayNoticias en tu componente global, pero ese misma propiedad solo existe dentro de la instancia de VueJS, entonces lo que puedes hacer es pasarlo como una prop en el componente para poder utilizarla de este modo:

Vue.component('slider', {
    props: ['arrayNoticias'],
    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>
    `,
});

Ahora en tu vista para invocar al componente quedaría así:

<slider :arrayNoticias="arrayNoticias"></slider>
6
  • Ya no me aparece el error, pero dentro en el <Slider> me aparece como arrayNoticias:undefined en el <Root> si me aparece la data.
    – xWesko
    Commented el 22 ago. 2019 a las 3:35
  • @LuisHernandez revisa si con lo que coloqué al final te ayuda
    – user128299
    Commented el 22 ago. 2019 a las 3:35
  • me aparece lo siguiente: [Vue tip]: Prop "arraynoticias" is passed to component <Anonymous>, but the declared prop name is "arrayNoticias". Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates. You should probably use "array-noticias" instead of "arrayNoticias".
    – xWesko
    Commented el 22 ago. 2019 a las 3:38
  • 1
    ummm que raro no se por que te aparece ese aviso, no veo que escribas con minúsculas, de todos modos déjame revisar @LuisHernandez
    – user128299
    Commented el 22 ago. 2019 a las 3:41
  • Seguro que lo escribiste en mayúsculas? @LuisHernandez como camel case?
    – user128299
    Commented el 22 ago. 2019 a las 3:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.