1

What I'm trying to do is within a v-for loop print two columns of cards element. So if the index is pair, I print the current element of the array an the next one in a row, and skip the elements with odd index.

My code so far:

  <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>

But I'm receiving the next error:

[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)...

Basically, I'm trying to do a loop with a condition over the elements of the array I'm looping. How could I achieve this?

1 Answer 1

2

Just change:

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

To:

v-for="(pet, index) in pets"
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks! I don't know where I got the documentation for the v-for or if I was just blinded because the frustration =(
Glad to help. The documentation is just great.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.