微信小程序循环添加商品的属性

最近项目中需要实现这样一个功能,点击添加规格,规格名称,内容那一行就会又多出一列,

变成这个样子

实现这个的逻辑就是循环一个数组,然后在push进去

代码如下

 <div v-for="(item,index) in guige" :key="item">
          <div class="specifica_line">
            <div class="specifica_line_key">
              <div>
                <input type="text" :name="'guige_name'+index" v-model="item.guige_name" placeholder="规格名称"
                  placeholder-style="color:#bbb;" />
              </div>
            </div>
            <div class="gray_line"></div>
            <div class="specifica_line_value">
              <div>
                <input type="text" :name="'guige_con'+index" v-model="item.guige_con" placeholder="内容"
                  placeholder-style="color:#bbb;" />
              </div>
            </div>
          </div>
 </div>
 <div @click="add_guige" class="add">添加规格</div>

data里面

  data() {
    return {
      artworkInfo: {}, //商品详情
      guige: [{ guige_name: "", guige_con: "" }]
    };
  },

添加规格上的事件 

add_guige() {
      var guige = this.guige;
      console.log(guige);
      guige.push({ guige_name: "", guige_con: "" });
      this.guige = guige;
    },

      var guige = this.guige;
      for (let i = 0; i < guige.length; i++) {
        guige[i].guige_name = value["guige_name" + i];
        guige[i].guige_con = value["guige_con" + i];
        if (guige[i].guige_name == "" || guige[i].guige_con == "") {
          guige.splice(i);   //这一步是把空的给截取掉
          break;
        }
      }
      console.log(guige);
      var attr_info = [];
      if (guige.length > 0) {
        guige.forEach(function (item) {
          var guige_key = item.guige_name;
          var guige_value = item.guige_con;
          attr_info.push({ [guige_key]: guige_value });
        });
      }
      o.attr_info = attr_info;

得到的数组形式是这样的

 

然后请求接口的时候把o当做参数传过去就好了