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随之改变。

其他更改时更新一个数据值

1 个答案: