多商品订单填写防伪码

一个订单有多件商品，每件商品的购买数量有1箱5盒3个，那每件就需要9个码

list:[
	{
		code1: Array(0)
		code2: Array(0)
		code3: Array(0)
		code_one: Array(0)
		code_three: Array(0)
		code_two: Array(0)
		cover_Image: "http://lejiangkeji.oss-cn-beijing.aliyuncs.com/uploads/20191101/ff0c3ce423f10031d692c4227f3d5c8d.jpg"
		goods_id: 29
		goods_num: 20
		name: "个测试产品"
		price: "46.00"
		show: false
		size_id: 42
		space_name: "红色"
		unit_info:{
			one_name: ""
			one_num: 0
			str: "20个"
			three_name: "个"
			three_num: 20
			two_name: ""
			two_num: 0
		}
	}
]

 <!-- 订单商品 -->
      <div class="con1">
        <div class="top" v-for="(item,i) in list" :key="i">
          <div class="good flex_l">
            <van-image width="2rem" height="2rem" fit="cover" radius="5" :src="item.cover_Image" />
            <div class="pro">
              <div class="name yihang">{{item.name}}</div>
              <div class="price flex">
                <span>
                  <i>￥</i>
                  {{item.price}}
                </span>
                <span style="color:#666;" v-if="item.unit_info">{{item.unit_info.str}}</span>
              </div>
              <div class="size">{{item.space_name}}</div>
            </div>
          </div>
          <div class="fake">
            <van-button type="warning" size="small" @click="isShow(i)">填写防伪码</van-button>
            <div class="item" v-show="item.show">
              <div class="one" v-if="item.unit_info && item.unit_info.one_name">
              
                // 这里可以绑定新建数组的每一项，这样结果就会被保存在一个数组中
                <van-field
                  v-model="item.code1[index]"
                  clearable
                  v-for="(items,index) in parseInt(item.unit_info.one_num)"
                  :key="index"
                  :label="'第'+(index+1)+item.unit_info.one_name"
                  placeholder="请输入防伪码"
                  right-icon="scan"
                  @click-right-icon="scanFake(i,1,index)"
                />
              </div>
              <div class="two" v-if="item.unit_info && item.unit_info.two_name">
                <van-field
                  v-model="item.code2[index]"
                  clearable
                  v-for="(items,index) in parseInt(item.unit_info.two_num)"
                  :key="index"
                  :label="'第'+(index+1)+item.unit_info.two_name"
                  placeholder="请输入防伪码"
                  right-icon="scan"
                  @click-right-icon="scanFake(i,2,index)"
                />
              </div>
              <div class="three" v-if="item.unit_info && item.unit_info.three_name">
                <van-field
                  v-model="item.code3[index]"
                  clearable
                  v-for="(items,index) in item.unit_info.three_num"
                  :key="index"
                  :label="'第'+(index+1)+item.unit_info.three_name"
                  placeholder="请输入防伪码"
                  right-icon="scan"
                  @click-right-icon="scanFake(i,3,index)"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

 	// 获取商品信息
    init1() {
      this.axios
        .post("/api/goods_order/orderDetails", {
          id: this.order_id
        })
        .then(data => {
          data.goods_list.forEach(item => {
          	//新添加的字段，必须先添加在使用，不然会出bug
            this.$set(item, "show", false);
            this.$set(item, "code1", []);
            this.$set(item, "code2", []);
            this.$set(item, "code3", []);
          });
          this.list = data.goods_list;
        });
    },
	// 扫描防伪码 i商品索引  num code1 code2 code3 index code码数组的索引
    scanFake(i, num, index) {
      scan().then(code => {
        console.log(888888888888, code); //扫描后的二维码
        
		//这里使用官方提供的方法，解决Vue 不能检测以下数组的变动的问题 this.$set(数组, 索引, 新值)
        if (num == 1) {
          this.$set(this.list[i].code1, index, code);
        } else if (num == 2) {
          this.$set(this.list[i].code2, index, code);
        } else if (num == 3) {
          this.$set(this.list[i].code3, index, code);
        }
      });
    },

由于 JavaScript 的限制，Vue 不能检测以下数组的变动：
当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
//解决方法
你也可以使用 vm.$set实例方法，该方法是全局方法Vue.set的一个别名：this.$set(vm.items, indexOfItem, newValue)
为了解决第二类问题，你可以使用 splice：
this.items.splice(newLength)