Question

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

这是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'
    }
  }
});

正如您可以看到＆＃39;详情＆＃39; data属性将绑定到三个输入字段。但字段名称的详细信息位于＆＃39;字段中。数据属性。 one:'a'和two: 'b'的绑定效果很好。但是，'fields.three'失败，因为c中的详细信息数据是嵌套的。如何更正？

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

Answer 1

这不会起作用，因为details对象没有使用键"c.x"的属性。

我建议您将数据模型重组为平面对象（没有任何嵌套对象），以便更容易管理。

如果你必须有嵌套属性，那么你必须通过帮助方法来促进对这些属性的读写：

＆＃13;

new Vue({
  el: '#app',

  data: {
    details: {
      a: 'a value',
      b: {
      	a: 'b.a value',
      },
    },
    fields: {
      one: 'a',
      two: 'b.a',
    },
  },

  computed: {
    state() {
      return JSON.stringify(this.details, '\n', 2);
    },
  },

  methods: {
    getValue(object, path) {
      let obj = object;
      for (const key of path.split('.')) {
      	obj = obj[key];
      }
      
      return obj;
    },
    
    setValue(object, path, value) {
      const keys = path.split('.');
      let obj = object;
      for (let i = 0; i < keys.length - 1; i++) {
      	obj = obj[keys[i]];
      }
      
      obj[keys[keys.length - 1]] = value;
    },
  },
});

＆＃13;

<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>

<div id="app">
  <input :value="getValue(details, fields.one)" @input="setValue(details, fields.one, $event.target.value)">
  <input :value="getValue(details, fields.two)" @input="setValue(details, fields.two, $event.target.value)">
  <pre>{{ state }}</pre>
</div>

＆＃13;

Answer 2

由于fields.three是一个对象而不是标量值，因此无法将其绑定到输入。您可以做的一件事是创建一个函数，检查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将模型绑定到此函数：

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

VueJS输入绑定与嵌套数据

2 个答案: