我正在尝试遍历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>


请注意,我正在尝试避免使用以下模式,在该模式中,字段props通过模板中的名称显式绑定:

<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对象创建单独的面板。

面板字段用于弹出面板,该面板将显示不同数据库查询的数据,并且JSON对象将根据查询的内容而有所不同。它可能是“ fname”,“ lname”,“ email”,也可能是其他完全不同的东西。因此,UI必须灵活处理数据。

最佳答案

使用嵌套的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>

10-07 19:32
查看更多