IT이야기

Vue/Vuex를 사용하여 동적 개체 값을 설정하는 방법

cyworld 2022. 6. 19. 18:30
반응형

Vue/Vuex를 사용하여 동적 개체 값을 설정하는 방법

Vue/Vuex를 사용하여 내 상태의 개체에서 키: 값 쌍을 동적으로 만들고 입력하는 방법을 이해하는 데 어려움을 겪고 있습니다. 예를 들어 다음과 같습니다.dataObject: {}(상태) 및 새로운 키:값 쌍을 작성하는 변환:

  setdataObjectProps: (state, payload) => {
    for (let [key, value] of Object.entries(
      state.dataObject
    )) {
      if (key == payload[0]) {
        dataObject.total_operation_time = payload[1];
        dataObject.machine_name = payload[2];
      }
    }
  },

이 솔루션은 작동하지만 키: 값 쌍이 이미 개체에 존재해야 합니다(빈 문자열로 설정).나는 그것을 사용해봤어요.Vue.set()다음과 같습니다.

Vue.set(dataObject.total_operation_time,  payload[1]);
Vue.set(dataObject.machine_name,  payload[2]);

다만, 올바르게 이해하면 인덱스/이름의 두 번째 파라미터가 요구되기 때문에, 어떻게 기능하는지를 이해하는데 어려움을 겪고 있습니다.내가 5살이라고 생각하는 것처럼 오브젝트에 키:값 쌍을 먼저 작성하지 않고 작업을 수행할 수 있는 방법을 설명할 수 있습니까?미리 감사드려요! 추신그들은 또한 반응해야 한다.

Vue 세트는 잘못된 방법으로 사용자만 작업을 수행해야 합니다.

반응형 개체에 속성을 추가하여 새 속성도 반응형인지 확인하므로 뷰 업데이트를 트리거합니다.Vue가 정상적인 속성 추가(예: this.myObject.newProperty = 'hi')를 감지할 수 없기 때문에 반응형 개체에 새 속성을 추가하려면 이 옵션을 사용해야 합니다.

그러나 함수 인수는 다음과 같습니다.

  • {개체 | 어레이} 타겟
  • {string | number} 속성 이름/인덱스
  • {any} 값

https://vuejs.org/v2/api/ #Vue-set

고객님의 경우 다음과 같습니다.

Vue.set(state.dataObject, 'total_operation_time',  payload[1]);
Vue.set(state.dataObject, 'machine_name',  payload[2]);

언급URL : https://stackoverflow.com/questions/58181375/how-to-set-dynamic-object-values-with-vue-vuex

반응형