Pessoal, um ponto de atenção nessa aula.
No vídeo é demonstrado o uso da diretiva v-for
, porém, quando tentei usá-la, estava acusando um erro de sixtaxe e não rodava.
Busquei nas documentações do VueJs e vi que nas versões 2.2.0+, ao usar v-for com um componente, um atributo key é obrigatório.
Por isso apresenta o erro quando tenta utilizar apenas a diretiva v-for
.
Nesse caso então, segue o jeito antigo e o jeito novo para utilizar a diretiva v-for
.
Jeito Antigo
<div>
<h1>{{ titulo }}</h1>
<ul>
<li v-for="foto of fotos">
<img v-bind:src="foto.url" v-bind:alt="foto.titulo">
</li>
</ul>
</div>
Jeito Novo
<div>
<h1>{{ titulo }}</h1>
<ul>
<li v-for="foto of fotos" :key="foto.titulo">
<img v-bind:src="foto.url" v-bind:alt="foto.titulo">
</li>
</ul>
</div>