1

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>

1 respuesta 1

3

El problema que tenes es que el primer div debe estar vacio.

Lo que pasa con vue, es que puede tener solo un elemento padre o principal por componente, y vos al poner el v-for sobre el div principal, le estarias pidiendo a vuel que repita ese div que es padre montones de veces.

Todo tu template se soluciona rodeando lo que ya tenes, dentro de otro <div> o <template>

template: ` 
    <div>    
        <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>
    </div>  
`,
})
2
  • Ahora me sale otro error: Property or method "noticias" is not defined on the instance but referenced during render.
    – xWesko
    Commented el 22 ago. 2019 a las 2:17
  • Ese es un componente diferente. Noticias tiene que ser una prop
    – gbianchi
    Commented el 22 ago. 2019 a las 4:35

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.