다른 변경 사항이있을 때 데이터의 한 값 업데이트

Question

Vue.js 데이터에서 양식 입력을 생성하는 구성 요소가 있습니다. 라이브 버전 Here. 내 데이터 구조는 다음과 같습니다 요약

data: { 
    providerData: { 
     archive_cost: { 
      legend: 'Warehouse cost', 
      fields: { 
       monthly_room: { 
        label: 'Monthly cost of room', 
        value: '200', 
        unit: '$' 
       }, 
       monthly_maintance: { 
        label: 'Monthly maintance cost', 
        value: '10', 
        unit: '$' 
       }, 
       summary: { 
        label: 'Summary cost', 
        value: '', 
        unit: '$', 
        disabled: true 
       } 
      } 
     } 
    }, 
}, 

값은 monthly_room 및 monthly_maintance의 합으로 계산 될 필요가있다. 어떻게해야합니까? 이 형식은 약 20 개의 값을 가지기 때문에 계산 된 값을 사용하지 않습니다.이 값은 구성 요소로 전달되고 별도로 처리해야합니다.

Answer 1

업데이트시 summary.value을 변경하는 값 배열을 볼 수 있습니다. 예 :

watch: { 
    '[providerData.archive_cost.fields.monthly_room.value, \ 
    providerData.archive_cost.fields.monthly_maintance.value]': function() { 
     this.providerData.archive_cost.fields.summary.value = 
      parseInt(this.providerData.archive_cost.fields.monthly_room.value) + 
      parseInt(this.providerData.archive_cost.fields.monthly_maintance.value); 
    } 
}, 

Here is a fork of the JSFiddle 변경 사항