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