他の変更時にデータの1つの値を更新する

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

summaryの値は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と変更します。