从 Vue 输入字段构建 Json 个对象

Question

我正在尝试使用 vue 方法生成 JSON 对象，并使用 vue 输入数据字段构建 JSON 对象的一部分。我的输入文件接受一个键和一个值，我有两个默认值 'zone' 和 '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，它只是在数组上循环。它不会 return 任何东西。 MDN Docs。也许你的意思是 .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() 如果你需要它。

从 Vue 输入字段构建 Json 个对象

Building Json Object from Vue input fields

javascript

json

vue.js

methods

javascript-objects