vue 遍历组件

Question

  <el-row type="flex" style="margin-bottom: 20px;">
    <UploadImg :defalutImg="patientPhoto.X1" type="X1"></UploadImg>
    <UploadImg :defalutImg="patientPhoto.X2" type="X2"></UploadImg>
    <UploadImg :defalutImg="patientPhoto.X3" type="X3"></UploadImg>
  </el-row>
  <el-row type="flex">
    <UploadImg :defalutImg="patientPhoto.X4" type="X4"></UploadImg>
    <UploadImg :defalutImg="patientPhoto.X5" type="X5"></UploadImg>
    <UploadImg :defalutImg="patientPhoto.X6" type="X6"></UploadImg>
  </el-row>

如图，真的是被自己恶心到了

问题1：首先因为要设计成两行的原因所以嵌套了一层，导致我都不知道怎么用v-for去遍历了，只好用最蠢的办法一个一个写了；请问我这个问题有优雅点的做法吗？

Answer 1

利用计算属性，将原数据处理成typeList的格式就行了

<template>
  <el-row v-for="(line,index) in typeList" type="flex" :class="{'margin-bottom':index==0}">
    <UploadImg v-for="value in line" :defaultImg="patientPhoto[value]" :type="value"></UploadImg>
  </el-row>
</template>
<script>
  export default{
    data(){
      return{
        typeList:[
          ['X1','X2','X3'],
          ['X4','X5','X6']
        ]
      }
    }
  }
</script>
<style>
  .margin-bottom{
    margin-bottom: 20px;
  }
</style>

Answer 2

<el-row>

<div v-for ="(item,index) in list" :key="index">
     <img/>
     <br  v-if= "index ===2"/>
</div>

<el-row>

Answer 3

利用计算属性把patientPhoto划分成两份数据，分别遍历

{
    computed:{
        patientPhotoLeft:function(){
            return Object.entries(this.patientPhoto).slice(0,3).reduce((a,c)=>{
                a[c[0]] = c[1];
                return a;
            },{});
        },
        patientPhotoRight:function(){
            return Object.entries(this.patientPhoto).slice(3,6).reduce((a,c)=>{
                a[c[0]] = c[1];
                return a;
            },{});
        }
    }

}