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>

请注意，我试图避免以下模式，其中字段属性在模板中由名称明确绑定(bind):

<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 对象模式适应该模型，需要为 panelfields 设置为的每个 JSON 对象创建单独的面板。

Panel fields 是一个弹出面板，会针对不同的数据库查询显示数据，JSON 对象会根据查询的不同而不同；它可能是“fname”、“lname”、“email”，也可能是完全不同的东西。因此，UI 在处理数据的方式上需要灵活。

Answer 1

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

<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>