最近项目中需要实现这样一个功能,点击添加规格,规格名称,内容那一行就会又多出一列,
变成这个样子
实现这个的逻辑就是循环一个数组,然后在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当做参数传过去就好了