vue实现淘宝商品详情页属性选择功能

Question

vue实现淘宝商品详情页属性选择功能，现在效果是点击版本和版本和颜色一起都高亮了，要实现点击版本实现版本对应的高亮点击颜色实现颜色的对应高亮图片描述

<div class="chose-ck" v-for="(item,index2) in colors" :key="index2">
                                        <p>{{item.name}}</p>
                                        <dt v-for="(item2,index) in item.childsCurGoods" :key="index" :class="{'check':index ===iac}" :data-id="item2.propertyId" @click="chek(index)">
                                            {{item2.name}}
                                        </dt>
                                    </div>
<script>

简易js

chek:function(index){
            this.iac=index
        }
</script>

怎么修改

Answer 1

你这是两个状态，所以需要两个变量来存储

//template
<div class="chose-ck" v-for="(item,index2) in colors" :key="index2">
    <p>{{item.name}}</p>
    <dt v-for="(item2,index) in item.childsCurGoods" :key="index" 
        :class="{'check':index === iac[index2]}" @click="chek(index2,index)">
        {{item2.name}}
    </dt>
</div>

//data
iac:[]
            
//methods
chek(index2,index){
    this.iac[index2]=index
    this.iac = this.iac.concat([])
}

Answer 2

你好，我刚刚也要开始做这个，但是以前没有经验也没有思路，请问你的两个框的基本和点击样式是用css控制的吗？具体代码能不能私信我一下？十分感谢！