从Vue输入字段构建Json对象

Question

我试图用vue方法生成一个JSON对象，并使用vue输入数据字段来构建JSON对象的一部分。我的输入文件接受一个键和一个值，我有两个默认值"zone"one_answers"capping"。我的目标是让JSON对象像：

{
"zone":{
"capping":{
"duration": 300
}
}
}

但我得到了一个JSON对象，如下所示：

{
"zone":{
"capping":{
"values":[
{
"key":"duration",
"value":"300"
}
]
}
}
}

这是我的vue方法：

generateJson() {
const values = this.inputs
const loopedObj = values.forEach((item) => {
const val = {
...item
}
return val
})
console.log(values)
const jsonValues = {
zone: {
capping: {
values
}
}
}
console.log(JSON.stringify(jsonValues))
}

这是输入字段的Vue代码：

<div>
<p>3- Add Data</p>
<button @click="showInput">+</button>
<div v-for="(input, k) in inputs" :key="k">
<input v-model="input.key" type="text" @change="getKey($event)" />
<input
v-model="input.value"
type="text"
@change="getValue($event)"
/>
</div>

有什么建议吗？非常感谢。

Answer 1

查看您的模板：

<input v-model="input.key" type="text" @change="getKey($event)" />
<input
v-model="input.value"
type="text"
@change="getValue($event)"
/>

看起来input是一个具有属性key和value:的对象

inputs: [
{
key: "",
value: ""
}
]

当你这样做的时候：

const values = this.inputs
const loopedObj = values.forEach((item) => {
const val = {
...item
}
return val
})

问题是：

• 您使用了forEach，它只是在数组上循环。它不会归还任何东西。MDN文档。也许你的意思是.map()
• 即使您使用.map()，您所做的只是复制对象，因此loopedObj看起来仍然像this.inputs。与values.map((item) => item))几乎相同

现在当你这样做的时候：

const jsonValues = {
zone: {
capping: {
values
}
}
}

就好像你刚刚做了：

const jsonValues = {
zone: {
capping: {
values: this.inputs
}
}
}

因为const values = this.inputs在您的代码中从未发生过任何更改。甚至从未尝试过使用loopedObj。

---

解决方案：

const values = {}
this.inputs.forEach((item) => {
values[item.key] = item.value
})
const json = {
zone: {
capping: values
}
}

如果你需要的话，也许JSON.stringify()。