I'm currently working on a v-for loop to display two columns of card elements. The idea is to print the current element and the next one in a row if the index is even, skipping the elements with odd indexes.
This is what my code looks like:
<template>
<q-layout>
<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>
<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>
However, I encountered an error that says:
[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)...
Essentially, I'm looking for a way to include a conditional statement within my array loop. Any suggestions on how I can accomplish this?