vue双层循环如何实现选中一个值变色

Question

就是商城项目选规格的那种，第一次循环遍历有哪些标题，第二次遍历该标题下有哪些选项

问题出现的环境背景及自己尝试过哪些方法

相关代码

<div class="one" v-for="(itm,idx) in item.spec_value" :key="itm.spec_id"  @click="checkItem(index,idx,itm.spec_id)" v-bind:class="{active:isActive[index]==idx}">
                <p>{{itm.spec_name}}</p>
            </div>

checkItem(index,idx,id){
    console.log(idx);
    this.isActive[index]=idx}

你期待的结果是什么？实际看到的错误信息又是什么？

我希望我选中一个值他就会变色，但只有选完所有选项他才变色，请问如何解决

Answer 1

我认为你不需要使用数组的形式，你在函数中将选中的元素添加到了数组中，但数组没有重新渲染，所以数组[index]处的值不是你想要的那个idx，你可以直接使用变量等于元素的index
如：@click="checkItem(index)" :class="isActive == index ?""active":""
checkItem(index){

this.isActive = index;

}