Javascript 带有嵌套数据的VueJS输入绑定

我有一个场景，在我的状态中有一些数据，在我的视图中有一些输入字段。哪个数据属性绑定到哪个输入字段由另一个数据属性决定

以下是HTML：

<div id="app">
  <input v-model="details[fields.one]">
  <input v-model="details[fields.two]">
  <input v-model="details[fields.three]">
</div>

如您所见，“详细信息”数据属性将绑定到三个输入字段。但是字段名的详细信息在“fields”数据属性中one:'a'和

two:'b'

的绑定非常有效。但是，

“fields.three”

失败，因为c中的详细信息数据是嵌套的。如何更正此问题

---

这里有一个例子：

因为你的

字段。三个
是一个对象而不是标量值，你不能将它绑定到你的输入。您可以做的一件事是创建一个函数来检查
字段。一个
，
字段。两个
和
字段。三个
分别是简单对象或嵌套对象

您可以使用此功能：

det (param) {
    let strlen = param.length
        if(1 === strlen){
    return param
  }
  let split = param.split('.')

  let details = JSON.parse(JSON.stringify(this.details))
  for (var key in details) {
    if(key == split[0]){
      for (var key2 in details[key]) {
       return details[key][key2]
      }
    }
  }
}

并使用param将模型绑定到此函数：


这是一个完整的工作演示
这将不起作用，因为
详细信息
对象没有键
“c.x”
的属性

我建议您将数据模型重新构造为平面对象（没有任何嵌套对象），以使其更易于管理

如果必须具有嵌套属性，则必须通过帮助器方法方便读取和写入这些属性：


newvue({
el:“#应用程序”，
数据：{
详情：{
a:‘a值’，
b:{
a:‘b.a值’，
},
},
字段：{
一是"a",，
二:"学士",，
},
},
计算：{
国家（）{
返回JSON.stringify（this.details，'\n'，2）；
},
},
方法：{
getValue（对象、路径）{
设obj=object；
for（路径拆分（'.'）的常量键）{
obj=obj[键]；
}
返回obj；
},
设置值（对象、路径、值）{
const keys=path.split（'.'）；
设obj=object；
for（设i=0；i

{{state}}
非常感谢。这确实正确地绑定了初始值，但当我更改输入字段中的值时，它不会更改数据中的数据。请看这里：我如何纠正这个问题？在这种情况下，您不需要模型。检查此演示：-这基本上是v-model在引擎盖下的功能。所以，它仍然是v型的，但更具活力。这真是太棒了！谢谢但是，当输入值更改时，它会更新“字段”值。相反，是否可以更新“详细信息”值？嗯，您可以使用此选项，但这将是一种黑客行为，因为我正在硬编码
details.c.x
。如果您使用数组而不是对象，那么您的应用程序和逻辑将更加容易。例如：您可以执行
details:[]
操作，将值或对象放入数组中，而不是
details:{}
。或者检查这一个，它不需要硬编码，但你必须添加另一个方法
update
它适用于字段1和2，你可以为第三个字段添加一个小代码（只需检测字段是否为一个字符串或与det（）方法不同我刚刚尝试了你的解决方案，效果很好。这两个方法和samayo提供的解决方案都适用于我。
det (param) {
    let strlen = param.length
        if(1 === strlen){
    return param
  }
  let split = param.split('.')

  let details = JSON.parse(JSON.stringify(this.details))
  for (var key in details) {
    if(key == split[0]){
      for (var key2 in details[key]) {
       return details[key][key2]
      }
    }
  }
}