今天发现了个很奇怪的问题,我在做一个:点击列表 使点中的列表项变色的功能,而且是多个大列表项,在每个大列表项里点击切换列表项的时候不影响其他大列表项的选项。
解决思路,因为这些大列表项是 请求 到的数据v-for出来的,大列表项里的小列表项也是用大列表项里的数据v-for出来的,所以我选择在请求导数据时,给每个小列表项数据加一个isSelect 属性 ,赋值false,
然后在小列表项上面绑定一个class,条件是判断isSelect属性等于某个值,然后这个class就绑定上去,上个代码看看:
<li class="specification" v-for="(groupSpec, groupIndex) in productGroupSpec" :key="groupIndex">
<button :disabled="spec.i" v-for="(spec, itemIndex) in groupSpec.values" :key="itemIndex"
@click="clickSpec(groupIndex, itemIndex, groupSpec.specName, spec.specValue,spec.isSelect)"
:class="{orange:spec.isSelect&&spec.isSelect==1}"
>{{spec.isSelect}}</button>
<!-- :disabled="spec.i" -->
</li>
我在请求到数据后先把数据赋值给了productGroupSpec,然后再用循环给productGroupSpec里的小列表项里的每一个列表项加了isSelect属性,并赋值为0,结果试了试,点击页面上的小列表项时,并没反应,然后问了问老同志,
因为vue的特性,变量里是没有getSet方法的,所以后续再点击事件里改变isSelect的值时,vue是捕捉不到isSelect的值变化的,所以,要在给productGroupSpec赋值前,给response里的每个小列表项加上isSelect属性,然后再把response赋值给productGroupSpec,
这样,我们点击小列表项时才能捕捉到isSelect值的变化,估计大家没明白是什么意识,最后总结一句,如果要给请求来的数据加属性,要在刚刚初始化的时候加属性,不要先把请求到的数据赋值给变量后再加属性,否则就会出现这个属性值变化时,vue捕捉不到。