중첩된 데이터를 사용한 VueJ 입력 바인딩

중첩된 데이터를 사용한 VueJ 입력 바인딩

시나리오에서는 내 상태의 데이터와 뷰에 입력 필드가 몇 개 있습니다.다른 데이터 속성에 의해 결정되는 입력 필드에 바인딩되는 데이터 속성.

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

보시다시피 '상세' 데이터 속성은 세 개의 입력 필드에 바인딩됩니다.그러나 필드 이름의 세부 정보는 '필드' 데이터 속성에 있습니다.및 의 바인딩은 매우 효과적입니다. 단, c의 상세 데이터가 중첩되어 있기 때문에 실패합니다.어떻게 수정하면 좋을까요?

여기 이 문제에 대한 힌트가 있습니다.https://jsfiddle.net/n17n7b21/3/

이 방법은 동작하지 않습니다.details개체에 키에 속성이 없습니다."c.x".

데이터 모델을 플랫 오브젝트(네스트된 오브젝트 없음)로 재구성하여 관리하기 쉽게 하는 것이 좋습니다.

중첩된 속성이 있어야 하는 경우 도우미 메서드를 통해 다음 속성을 쉽게 읽고 쓸 수 있어야 합니다.

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;
    },
  },
});

<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>

이왕이면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/

언급URL : https://stackoverflow.com/questions/47854181/vuejs-input-binding-with-nested-data