VueJS зацикливание массива с условием над элементами массива (v-for с v-if)

Question

То, что я пытаюсь сделать, находится в пределах v-for цикл печати двух столбцов элемента карты. Поэтому, если индекс является парой, я печатаю текущий элемент массива, следующий в строке, и пропускаю элементы с нечетным индексом.

Мой код до сих пор:

<template> 
    <q-layout> 
    <!-- Main block start--> 
    <div v-if="!showBack" class="card scroll" id="cards-view"> 
     <div class="layout-padding"> 
     <p class="group"> 
      <button class="primary circular fixed-bottom add-btn"><router-link to="/create" exact><i class="icon-32 text-white">add</i></router-link></button> 
     </p> 
     <div class="row content-center text-center gutter" v-for="(index, pet) in pets" v-if="index % 2 === 0"> 
      <div class="auto "> 
      <div class="shadow-1"> 
       <img class="responsive" :src="pets[index].name"> 
       <div class="card-content text-bold"> 
       <img class="responsive sex" :src="pets[index].sex">{{ pets[index].name }} 
       </div> 
      </div> 
      </div> 
      <div class="auto "> 
      <div class="shadow-1"> 
       <img class="responsive" :src="pets[index+1].name"> 
       <div class="card-content text-bold"> 
       <img class="responsive sex" :src="pets[index+1].sex">{{ pets[index+1].name }} 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    <!-- Man block end--> 

    <!--- Content --> 
    <router-view class="layout-view"></router-view> 

    </q-layout> 
</template> 

<script> 

export default { 
    data() { 
    return { 
     pets: [{ 
      name: 'Júpiter', 
      sex: 'statics/img/female.jpg', 
      photo: 'statics/img/jupiter.jpg' 
     },{ 
      name: 'Ringo', 
      sex: 'statics/img/male.jpg', 
      photo: 'statics/img/ringo.jpg' 
     } 
     ] 
    } 
    } 
} 
</script> 

Но я получаю следующую ошибку:

[Vue warn]: Error when rendering anonymous component at...

vue.runtime.common.js?d43f:435 TypeError: Cannot read property 'photo' of undefined at eval (eval at 167 (0.cd4853d….js:28), :95:31)...

В принципе, я пытаюсь сделать цикл с условием над элементами array Я зацикливаюсь. Как я мог это достичь?

Answer 1

Просто измените:

v-for="(index, pet) in pets" 

To:

v-for="(pet, index) in pets"