문자열 경로별로 중첩된 개체 속성 설정

문자열 경로별로 중첩된 개체 속성 설정

3개의 선택 박스가 있는데 선택 시 특정 필드를 리셋하고 싶습니다.어떻게 하면 다이내믹하게 할 수 있고 재사용이 가능합니까?

다음은 제 코드의 발췌입니다.

v-on:select="getDate('{{ route('api.v1.get.date') }}', 'input1', ['form.company.input2', 'form.company.input3'], $event)"

getDate(url, obj, obj2, event){

     let current = this

     current[obj] = ''
     current[obj2[0]] = ''
     current[obj2[1]] = ''

}

언제objVue 인스턴스의 루트 레벨에 있습니다(즉,current[obj])는 속성을 올바르게 설정하지만 다음 경우에는 설정되지 않습니다.obj는 네스트된 객체입니다.

JavaScript에서 속성 접근자는 닷으로 구분된 문자열에 있는 중첩된 개체 경로를 허용하지 않습니다.이 문자열을 사용하면 다음과 같이 중첩된 속성을 설정하는 대신 루트 Vue 인스턴스에 속성을 생성할 수 있습니다.

this['form.company.input2'] = ''  // XXX: creates `form.company.input2` prop
this.form.company.input2 = ''     // sets `input2`

경로별로 개체 값을 설정하려면 개체 경로를 사용하여 다음을 통해 현재 Vue 인스턴스의 데이터 속성을 탐색하는 메서드를 생성할 수 있습니다.this:

methods: {
  getDate(url, obj, obj2, event) {
    this.setValue(obj, '')
    this.setValue(obj2[0], '')
    this.setValue(obj2[1], '')
  },
  setValue(path, value) {
    let obj = this
    const parts = path.split('.')
    while (parts.length > 1 && obj.hasOwnProperty(parts[0])) {
      obj = obj[parts.shift()]
    }
    obj[parts[0]] = value
  }
}

new Vue({
  el: '#app',
  data() {
    return {
      input1: 'input1',
      form: {
        company: {
          input2: 'input2',
          input3: 'input3'
        }
      }
    }
  },
  methods: {
    getDate(url, obj, obj2, event) {
      this.setValue(obj, '')
      this.setValue(obj2[0], '')
      this.setValue(obj2[1], '')
    },
    setValue(path, value) {
      let obj = this
      const parts = path.split('.')
      while (parts.length > 1 && obj.hasOwnProperty(parts[0])) {
        obj = obj[parts.shift()]
      }
      obj[parts[0]] = value
    },
    route(prop) {
      return prop
    }
  }
})

<script src="https://unpkg.com/vue@2.6.10"></script>

<div id="app">
  <input v-model="input1">
  <input v-model="form.company.input2">
  <input v-model="form.company.input3">

  <button @click="getDate(route('api.v1.get.date'), 'input1', ['form.company.input2', 'form.company.input3'], $event)">
    Reset data
  </button>
</div>

또는 라이브러리를 사용할 수도 있습니다(예:lodash의 ):

methods: {
  getDate(url, obj, obj2, event) {
    _.set(this, obj, '')
    _.set(this, obj2[0], '')
    _.set(this, obj2[1], '')
  }
}

new Vue({
  el: '#app',
  data() {
    return {
      input1: 'input1',
      form: {
        company: {
          input2: 'input2',
          input3: 'input3'
        }
      }
    }
  },
  methods: {
    getDate(url, obj, obj2, event) {
      _.set(this, obj, '')
      _.set(this, obj2[0], '')
      _.set(this, obj2[1], '')
    },
    route(prop) {
      return prop
    }
  }
})

<script src="https://unpkg.com/lodash@4.17.11/lodash.js"></script>
<script src="https://unpkg.com/vue@2.6.10"></script>

<div id="app">
  <input v-model="input1">
  <input v-model="form.company.input2">
  <input v-model="form.company.input3">

  <button @click="getDate(route('api.v1.get.date'), 'input1', ['form.company.input2', 'form.company.input3'], $event)">
    Reset data
  </button>
</div>

사용해보십시오.this.$set다음과 같이 기능합니다.

  this.$set(current,obj,'');
 this.$set(current,obj2[0],'');
 this.$set(current,obj2[1],'');

그 기능에 대해 자세히 배우다

이 라이브러리에서는 중첩된 개체 경로를 사용할 수 있습니다.

https://www.npmjs.com/package/vue-data-object-path

발췌문은 다음과 같습니다.

v-on:select="getDate('{{ route('api.v1.get.date') }}', 'input1', ['form.company.input2', 'form.company.input3'], $event)"

getDate(url, obj, obj2, event){

     let current = this

     current.$op.set(obj, '')
     current.$op.set(obj2[0], '')
     current.$op.set(obj2[1], '')

}

내부 중첩 값을 가져오거나 설정하기 위해object로서의 길을 가지다string

function getNestedValue(obj, path){
    return path.split('.').reduce((o,i)=> o[i] || '', obj)
}

function setNestedValue(obj, path, value) {
    let i;
    path = path.split('.');
    for (i=0;i<path.length-1;i++) obj = obj[path[i]];
    obj[path[i]] = value
}

const obj = { a:{ b: [{c: 1 },{ d: 2 }] }}

setNestedValue(obj,'a.b.0.c',3)
console.log(getNestedValue(obj, 'a.b.0.c'))  // 3

언급URL : https://stackoverflow.com/questions/55664609/setting-nested-object-property-by-string-path