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
        }
      }
    },