Javascript VueJS在数组元素上循环使用条件的数组（v-for和v-if）

我要做的是在v-for循环中打印两列卡片元素。因此，如果索引是pair，我将数组的当前元素打印为一行中的下一个元素，并跳过具有奇数索引的元素

到目前为止，我的代码是：

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

添加

{{pets[index].name}
{{pets[index+1].name}
导出默认值{
数据（）{
返回{
宠物：[{
姓名：“Júpiter”，
性别：'statics/img/female.jpg'，
照片：“statics/img/jupiter.jpg”
},{
名称：'Ringo'，
性别：'statics/img/male.jpg'，
照片：“statics/img/ringo.jpg”
}
]
}
}
}

但我收到了下一个错误：

[Vue warn]：在以下位置呈现匿名组件时出错

vue.runtime.common.js？d43f:435类型错误：无法读取属性“photo” 未定义的 评估时（评估时167（0.cd4853d…js:28），：95:31）

基本上，我尝试在循环的数组元素上使用一个条件进行循环。我怎样才能做到这一点呢？

只要改变一下：

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

致：

---

谢谢我不知道我从哪里得到了v-for的文档，或者我是不是因为沮丧而失明了=（很乐意帮忙。文档非常棒。

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