javascript - VueJS输入绑定(bind)与嵌套数据

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

这是HTML:

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

这是Javascript:

App = new Vue({
  el: '#app',
  data: {
    d: 'Hello Vue.js!',
    details: {
      a: 'aa',
      b: 'bb',
      c: {
        x: 'xx'
      }
    },
    fields: {
      one:'a',
      two: 'b',
      three: 'c.x'
    }
  }
});

如您所见，“详细信息”数据属性将绑定(bind)到三个输入字段。但是字段名称的详细信息位于“字段”数据属性中。 绑定(bind)one:'a'和two: 'b'非常有效。但是，'fields.three'失败，因为c中的详细信息数据是嵌套的。 我该如何纠正？

这是一个小提琴:https://jsfiddle.net/n17n7b21/3/

最佳答案

由于fields.three是对象而不是标量值，因此无法将其绑定(bind)到输入。您可以做的一件事是创建一个函数，以检查fields.one，fields.two和fields.three是每个简单对象还是具有嵌套对象。

您可以使用此功能:

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将模型绑定(bind)到此函数:



这是完整的工作演示https://jsfiddle.net/n17n7b21/6/

关于javascript - VueJS输入绑定(bind)与嵌套数据，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47854181/