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