javascript - vuejs 将多个输入值分配给 json 对象值

Question

我正在尝试遍历 Vue 中的 JSON 对象。该panelfields变量将被分配给一个 JSON 对象，并将在具有不同数量的键/值对的不同 JSON 对象之间变化。

我无法弄清楚如何将值插入到每个输入中，因为它是创建的。代码类似于以下内容：

data() {
  return {
    panelfields:
    [
      {
        fname: "fname1",
        lname: "lname1",
        email: "email1"
      },
      {
        fname: "fname2",
        lname: "lname2",
        email: "email2"
      },
      {
        fname: "fname3",
        lname: "lname3",
        email: "email3"
      }
    ]
  }
}

<div :key="index" v-for="(value, name, index) in panelfields">
  <span>{{ name }}: </span>
  <input type="text" v-model="panelfields" :value="value" />
</div>

注意我试图避免以下模式，其中字段道具在模板中由名称显式绑定：

<input type="text" v-model="value.fname" :value="value" />
<input type="text" v-model="value.lname" :value="value" />
<input type="text" v-model="value.email" :value="value" />

...这将强制 JSON 对象模式适合该模型，需要为每个设置为的 JSON 对象创建单独的面板panelfields。

面板字段用于弹出面板，将显示不同数据库查询的数据，并且 JSON 对象将根据查询的内容而有所不同；它可能是“fname”、“lname”、“email”，也可能是完全不同的东西。所以 UI 需要灵活处理数据。

标签： javascriptjsonvue.jsvuejs2

Answer 1

使用嵌套v-for按键（通过 获得Object.keys(field)）迭代每个字段的道具，允许您动态绑定道具v-model="field[key]"：

<div :key="index" v-for="(field, name, index) in panelfields">
  <input v-for="key in Object.keys(field)" v-model="field[key]" />
</div>

new Vue({
  el: '#app',
  data() {
    return {
      panelfields: 
      [
        {
          fname: "fname1",
          lname: "lname1",
          email: "email1"
        },
        {
          fname: "fname2",
          lname: "lname2",
          email: "email2"
        },
        {
          fname: "fname3",
          lname: "lname3",
          email: "email3"
        }
      ]
    }
  },
})

<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>

<div id="app">
  <div :key="index" v-for="(value, name, index) in panelfields">
    <span>{{name}}: </span>
    <input type="text" v-for="x in Object.keys(value)" v-model="value[x]" />
  </div>
  
  <div>
    <pre>panelfields = {{panelfields}}</pre>
  </div>
</div>