第一个问题:
目前我使用的是vue框架,通过v-model获取到的参数是{key1=name,value1=aa},但是我想要的是{name=aa}这种形式。
第二个问题:
我的表格默认只有一行,其他行是我动态添加的,添加的时候是通过
td_1.innerHTML = "<input type='text' name='parm" + rowNums + "key' class='kv' v-model='formData.reqMap.parm" + rowNums + "k'/>";
td_2.innerHTML = "<input type='text' name='parm" + rowNums + "value' class='kv' v-model='formData.reqMap.parm" + rowNums + "v'/>";
相当于拼字符串形式添加的,也拼接了属性。但是目前获取参数的时候只能获取到第一行,其他添加出来的行的数据获不到。
希望大神帮忙指点一二,不知道我的描述是否清晰。
https://blog.csdn.net/zhangdaohong/article/details/84027835
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
</head>
<body>
<div id="app">
<table border="1">
<thead>
<tr>
<th>key</th>
<th>value</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in formData" :key=index>
<td><input v-model="item.key"></td>
<td><input v-model="item.value"></td>
<td>
<button @click='addRow(index)'>向下插入行</button>
<button @click='removeRow(index)'>删除行</button>
</td>
</tr>
</tbody>
</table>
<button @click='add'>添加到最后一行</button>
<button @click='remove'>删除最后一行</button>
<button @click='getData'>获取数据</button>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return {
formData: [
{
key:'',
value: ''
}
]
}
},
methods:{
add(){
this.formData.push({
key:'',
value: ''
})
},
remove(){
this.formData.pop();
},
addRow(index){
this.formData.splice(index+1,0,{
key:'',
value: ''
})
},
removeRow(index){
this.formData.splice(index,1)
},
getData(){
let data = {}
this.formData.forEach(item=> {
data[item.key] = item.value
})
alert(JSON.stringify(data))
}
}
});
</script>
</html>
简单写了个demo ,希望对你有帮助