É obrigatório o uso da diretiva v-key junto com o v-for

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>