商品多规格,如下图
微信截图_20210425124203.png
第一次接触商城项目,下面是后端返回的数据
QQ截图20210425124328.png
再看前端代码
下面这行代码是把请求的数据赋值给 product.skus
QQ截图20210425131541.png
3.png
用for循环先把规格的大分类遍历出来,然后再套一个for循环把每个规格遍历出来(第一张是效果图),遍历出来之后咋办呢,下面要开始写逻辑了,搞不懂逻辑,就开始问问问问问问问问问问问问问问问问问问问问问问问问问问问问问问问问问问问问问问问问问问问问,问着问着也有了一点思路。
我们可以看到下面这行代码:

@click="skuClick(index,v.id,v.sku_ca_name)"
// index:大分类的下标
// v.id:被点击规格的id
// v.sku_ca_name:被点击规格的名称

通过skuClick点击事件分别传入了'大分类的下标','被点击规格的id' 和 '被点击规格的名称',接下来看看data中定义的数据
4.png

skuId:用于存放选中规格的ID

skuName:用于存放选中规格的名称

5.png
这段代码是放在数据请求里面的,每次请求数据的时候先把skuId和skuName里面的内容清空,不写也没事,以防万一我还是写了,再看下面的for循环:

for (let i = 0; i < _this.product.skus.length; i++) {
    _this.skuId.push([]);
    _this.skuName.push([]);
}
// _this.product.skus.length 是规格大分类的个数,比如机身颜色、存储容量、网络类型、套餐类型一共是4个
// _this.skuId.push([]); 这行代码的意思就是向skuId中动态插入4个空数组
// _this.skuName.push([]); 这行代码和上面的一样

接下来看看skuClick事件

skuClick(index, id,name) {
    let _this = this;
    let skuId = _this.skuId;
    // skuId[index] = id; //监听不到数组变化
    this.$set(skuId,index,id); //使用$set() 可以监听到数组发生改变
    this.$set(_this.skuName,index,name); //使用$set() 可以监听到数组发生改变
}
/*
    skuClick传入的参数:
        index:规格大分类的下标
        id:被点击规格的id
        name:被点击规格的name
    这个时候开始向数组中添加数据:
    this.$set(skuId,index,id); //向skuId中的index下标添加被点击的规格id;
    因为咱们上边的for循环已经向skuId中push了4个空数组,用$set就是替换了skuId数组中下标为index的元素
*/

为什么要监听数组改变呢?

因为咱们点击每个规格的时候还需要给规格添加样式,
刚开始用的 skuId[index] = id; 监听不到数组变化,后来想起了 this.$set(要改变的数组,要改变的下标,现在的值)
this.$set()方法确实可以监听到数组的变化,然后咱们就动态添加/改变class,第三张图 :class="{'active':skuId[index] == v.id}",这样就可以了哦!