vue watcher에서 구성 요소 인스턴스 액세스

vue watcher에서 구성 요소 인스턴스 액세스

저는 과금관리자와 비슷한 프로젝트를 진행하고 있기 때문에 그 수량이나 단가가 변경될 때마다 소계를 다시 계산하고 싶습니다.워처나 계산된 속성을 사용하여 이 작업을 수행하려고 시도하고 검색했지만, 이와 같이 다른 변경이 있을 때 요소의 전체 범위에 액세스해야 하기 때문에 올바른 방법을 찾을 수 없습니다.

모델 구조:

• 세부 사항
• 양
• 단위값
• 소계(계산 또는 갱신해야 함)

그래서 저는 이렇게 할 수 있을 것 같아요.

    Vue.component('item', {
    template: '#item',
    props: {
      item: Object,
    },
    computed:{
        total: function(){ 
            return this.quantity*this.unit_value;
         }
    },
    watch:{
      'item.quantity':()=>{
        this.subtotal = this.quantity*this.unit_value;
      }
    }
  });

리스트에서 몇 개의 컴포넌트를 읽고 있다.

저는 워처를 사용하여 접근 방식을 병합하고 동일한 코드로 계산하여 더 짧게 만들었습니다.

문제는 홀 엘리먼트에 내부에서 접근할 수 있는 방법을 찾지 못했다는 것입니다.누구라도 올바른 방법을 설명할 수 있을까요?감사합니다.

여기서는 화살표 함수를 사용하지 말고 메서드 선언을 사용해야 합니다.

의 속성을 감시하는 경우item오브젝트, 이 오브젝트에서는item오브젝트 자체와 더불어deep: true감시자의 깃발

마지막 세부사항: 현재 사용 중인 속성은 에 선언되어 있지 않습니다.data. 선언합니다.그렇지 않으면 반응하지 않습니다.즉, 변경 시 계산이 재계산되지 않습니다.

코드 참조:

Vue.component('item', {
  template: '#item',
  props: {
    item: Object,
  },
  data() {
    return {
      subtotal: null,         // added data properties
      quantity: null,
      unit_value: null
    }
  },
  computed: {
    total: function() {
      return this.quantity * this.unit_value;
    }
  },
  watch: {
    item: {                          // watching for item now
      deep: true,                    // using deep: true
      handler() {                    // and NOT using arrow functions
        this.subtotal = this.quantity * this.unit_value;
      }
    }
  }
});

언급URL : https://stackoverflow.com/questions/49563044/access-component-instance-from-vue-watcher