【Vue】vue computed，对象里的一个数组属性变了，不会执行

如题，合计后面的字段是computed里的receivableItemCnyTotal，现在我detail.receivableList里的invoiceAmountCny 改变了，但是computed不执行是怎么回事
【Vue】vue computed，对象里的一个数组属性变了，不会执行

computed: {
receivableItemCnyTotal () {
let total = 0
if (!this.detail.receivableList || this.detail.receivableList.length === 0) {
return 0
}
this.detail.receivableList.forEach(item => {
if (item.invoiceAmountCny) {
total += item.invoiceAmountCny
}
})
return total
}
},

receivableItemColumns: [{
title: '业务编号',
key: 'businessNo'
}, {
title: '费用名',
key: 'feeItemName'
}, {
title: '委托人',
key: 'receiveFromName'
}, {
title: '币别',
key: 'currency'
}, {
title: '总金额',
key: 'amount'
}, {
title: '汇率',
key: 'exchangeRate',
render: (h, params) => {
let found = _this.exchangeRateTemp.find(element => {
return element.currency === _this.detail.receivableList[params.index].currency
})
if (found) {
_this.detail.receivableList[params.index].exchangeRate = found.exchangeRate
return h('span', found.exchangeRate)
}
return h('span', '')
}
}, {
title: '未开票金额',
key: 'notInvoicedAmount',
render: (h, params) => {
let invoicedAmount = 0
if (_this.detail.receivableList[params.index].invoiceAmount) {
invoicedAmount = _this.detail.receivableList[params.index].invoiceAmount
}
let notInvoicedAmount = params.row.amount - invoicedAmount - params.row.otherInvoicedAmount
return h('span', notInvoicedAmount)
}
}, {
title: '当前开票金额',
key: 'invoiceAmount',
render: (h, params) => {
return h('div', [
h('InputNumber', {
props: {
size: 'small',
value: params.row.invoiceAmount,
min: 0,
max: params.row.amount - params.row.otherInvoicedAmount,
},
on: {
'on-change': e => {// eslint-disable-line
_this.detail.receivableList[params.index].invoiceAmount = e
},
},
}),
])
},
}, {
title: '当前开票金额(￥)',
key: 'invoiceAmountCny',
render: (h, params) => {
let invoicedAmount = 0
if (_this.detail.receivableList[params.index].invoiceAmount) {
invoicedAmount = _this.detail.receivableList[params.index].invoiceAmount
}
let invoiceAmountCny = invoicedAmount * _this.detail.receivableList[params.index].exchangeRate
_this.detail.receivableList[params.index].invoiceAmountCny = invoiceAmountCny
return h('span', invoiceAmountCny)
},
}, {
title: '税率',
key: 'taxRate'
}, {
title: '税额(￥)',
key: 'taxAmount'
}]

回答

===========作者的答案=============
原型上的数据没有改变，因为初始化的时候这个属性不存在

this.$set(_this.detail.receivableList[params.index], 'invoiceAmountCny', invoiceAmountCny)

【Vue】vue computed，对象里的一个数组属性变了，不会执行

你这里对象的invoiceAmount属性并没有改变，你改变的只是InputNumber输入框的内容，因为你的change事件注册错了。

on里面直接写事件名就可以了，不需要再加on-，另外e是event事件对象，你直接赋值给invoiceAmount属性也不大合适

说实话有点没太看懂问题，我再复述一遍

问题

你的合计总量是通过计算属性得到的，计算属性依赖的是数据中的invoiceAmountCny属性，也就是表格中的当前开票金额，然后你发现返回的数据也就是你图片中表格下面的 JSON 数据中第二条的 invoiceAmountCny由 13 变成了 1，但是你的计算属性却没有响应式的更新，也就是你的合计结果没变，对吗？如果我的描述对的话，问题就很明显了

答案

计算属性的结果没变，是正确的，因为计算属性的改变是依赖与 Vue 的响应式系统的，你这里的数据改变没有触发响应式更新，虽然你的 JSON 数据确实显示从 13 变成了 1，但是你看你的表格数据中的第二条依旧是 13，所以你的数据更新没有触发 Vue 的响应式系统

分析

这里的问题应该是你更新数组的方法有问题，Vue 中数组的响应式是通过劫持 Array.prototype 属性上的 7 个操作数组的方法实现的，比如 push、pop、splice 等，或者使用 Vue.set 方法更新也可以

总结

你问题应该就是出在了更新数组数据上，数组的数据更新没有触发 Vue 的响应式系统，建议查看更新数组内容的代码，如果你发现表格数据中的第二条 13 也变成了 1 那结果就对了

以上是 【Vue】vue computed，对象里的一个数组属性变了，不会执行 的全部内容， 来源链接： utcz.com/a/84326.html

回到顶部