vue.js商品选规格

 

<div class="gu_chima" v-for="(spec,n) in items.spec_info" :key="n">
<li  :class="[specfo.isShow?'checks':'checks',subIndex[n] == index?'check':'checks']"
　　v-for="(specfo,index) in spec.gsp_list"
       :key="index"
      @click="spec_a(specfo,n,$event,index)"
>{{specfo.gsp_value}}</li>

data() {
    return {
 selectArr: [], //存放被选中的值
 subIndex: [], //是否选中 因为不确定是多规格还是单规格，所以这里定义数组来判断
}
}
 
spec_a(item, n, event, index) {
      let that = this;
      if (that.selectArr[n] != item) {
        that.selectArr[n] = item;
        that.subIndex[n] = index;
      } else {
        that.selectArr[n] = "";
        that.subIndex[n] = -1; //去掉选中的颜色
      }
      that.check_Item(that.subIndex);
    },
check_Item(n) {
      let that = this;
      let option_s = that.items.spec_info;
      let result_s = []; //定义数组存储被选中的值
      for (let i in option_s) {
        result_s[i] = that.selectArr[i] ? that.selectArr[i] : option_s[i].gsp_list[0];
      }
      for (let i in option_s) {
        let last = result_s[i]; //把选中的值存放到字符串last去
        for (let k in option_s[i].gsp_list) {
          result_s[i] = option_s[i].gsp_list[k]; //赋值，存在直接覆盖，不存在往里面添加name值
          option_s[i].gsp_list[k].isShow = that.is_May(result_s); //在数据里面添加字段isShow来判断是否可以选择
          result_s[i].spec_name = option_s[i].spec_name;
        }
        result_s[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时避免被覆盖
      }
      that.$forceUpdate(); //重绘
    },
    is_May(result_s) {
      for (let i in result_s) {
        if (result_s[i] == "") {
          return true; //如果数组里有为空的值，那直接返回true
        }
      }
    },