從 Vue 輸入字段構建 Json Object

Question

我嘗試使用 vue 方法生成 JSON object 並使用 vue 輸入數據字段來構建 JSON2668CFDE63911ACC49 的一部分我的輸入文件接受一個鍵和一個值，我有兩個默認值“區域”和“封頂”。 我的目標是讓 JSON object 像：

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

但相反，我得到一個 JSON object 像這樣：

{
   "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的 object ：

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

當你這樣做時：

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

問題是：

• 您使用的forEach只是在數組上循環。 它不會返回任何東西。 MDN 文檔。 也許你的意思是.map()
• 即使您使用.map() ，您所做的只是復制 object ，因此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()它。