vue 如何让循环共用一个方法，且相互不影响

Question

其实想用一个方法的，但是因为有的产品里面没有图片，有的有，所以就写成两个方法。
但是如果判断图片来做，现在的color中第四个没有图片，会显示文字，就会和上面size第四个点击是同一个效果。总之就是会相互影响。

如何只是用同一个方法，且相互不影响呢?

<div v-for="(value, key, index) in goodType" >
          <p class="text-left typeTitle">{{key}}:</p>
          <div v-for="(childItem, childIndex) in value" class="typeInfo">
            <div v-if="childItem.img == ''"
                 class="typeInfo_value"
                 v-bind:class="{active:childIndex==isActive}"
                 @click="chooseTheType(childIndex, childItem.id, childItem.type, childItem.value)">{{childItem.value }}</div>
            <div v-if="childItem.img !== ''" class="typeInfo_img"
                 v-bind:class="{active:childIndex==isActive2}"
                 @click="chooseTheType2(childIndex, childItem.id, childItem.type, childItem.value)"
            ><img :src="childItem.img" alt=""></div>

          </div>

        </div>

方法

chooseTheType(index,id, type, value){
          this.isActive=index;
          this.activeType.push(index);
          this.itemID = id;
          this.itemType = type;
          this.itemValue = value;
          this.chooseTypeOne = true;
          this.chooseTypeTwo = true;
          console.log(this.itemID,this.itemType,this.itemValue)
        },
        chooseTheType2(index,id, type, value){
          this.isActive2=index;
          this.activeType.push(index);
          this.itemID2 = id;
          this.itemType2 = type;
          this.itemValue2 = value;
          this.chooseTypeTwo = true;
          var count=0
        
          console.log(this.itemID2,this.itemType2,this.itemValue2)
        },

Answer 1

用一个方法 你通过 type 来判断不就行了。

Answer 2

把size的v-if去掉呗，这样颜色没图也不会被size的v-if捕捉到了

<div v-for="(value, key, index) in goodType" >
          <p class="text-left typeTitle">{{key}}:</p>
          <div v-for="(childItem, childIndex) in value" class="typeInfo">
            <div class="typeInfo_value"
                 v-bind:class="{active:childIndex==isActive}"
                 @click="chooseTheType(childIndex, childItem.id, childItem.type, childItem.value)">{{childItem.value }}</div>
            <div v-if="childItem.img !== ''" class="typeInfo_img"
                 v-bind:class="{active:childIndex==isActive2}"
                 @click="chooseTheType2(childIndex, childItem.id, childItem.type, childItem.value)"
            ><img :src="childItem.img" alt="">
            <div v-if="childItem.img == ''">{{childItem.value }}</div>
            </div>
          </div>
</div>

Answer 3

增加一个健type，值定义为 image 、text , 使用一个方法就可以了，当类型为 image 时渲染展示图片的视图，为text时展示文本的视图