1

sé que puede parecer una pregunta estúpida, pero es mi primera vez usando Vue (además soy junior) y he intentado simplificar el componente creado eliminando index en el v-for pero me desaparece todo el código os muestro el código completo

<div id="app">
        <button v-on:click="cambiarVisibilidad">Mostrar/Ocultar</button>
        <ul v-if=mostrar>
            <tv-show 
            v-for="(show, index) in tvshows" 
            v-bind:key="index"
            v-bind:name="show.name"
            v-bind:seasons="show.seasons">
            
            </tv-show>
</ul>
        <div v-else>
            No hay datos
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js">
    </script>
    <script>
Vue.component ("tv-show", {
    props: {
                name: String,
                seasons: Number,
            },
   template: `<li>
                <strong> {{name}} </strong> ({{seasons}} Temporadas)
                </li>`
        })  
        const app = new Vue({
            el: '#app',
            data: {
                mostrar: false,
                tvshows: [{
                        name: "Game of Thrones",
                        seasons: "7"
                    },
                    {
                        name: "Breaking Bad",
                        seasons: "5"
                    },
                    {
                        name: "Mr Robot",
                        seasons: "4"
                    },
                    {
                        name: "L0ST",
                        seasons: "6"
                    },
                ]
            },
            methods: {
                cambiarVisibilidad: function () {
                    this.mostrar = !this.mostrar
                }
            }
        })
    </script>
</body>

</html>

No me queda muy claro a qué está haciendo referencia index y si habría alguna manera de suprimirlo en el bucle para simplificar aún más el código. He estado buscando ejemplos de "for item in list" pero aún así no me ha quedado nada claro.

Muchas gracias y un saludo

1 respuesta 1

0

Bienvenido ! Felicitiones por tu primer pregunta. No tengas miedo de preguntar pero siempre respetando el código de SO. Respondiendo a tu pregunta según la documentación de vue

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

dentro de los bloques v-for tenemos acceso completo a las propiedades del ámbito principal. v-for también admite un segundo argumento opcional para el índice del elemento actual.

El index es un segundo parametro opcional en caso de no querer usarlo debes hacerlo de siguiente manera

<div v-for="item of items"></div>

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.