Question

我有一个data属性，它是一个空数组：

<pe:documentViewer height="500" width="1000" value="#{realReport.tempPdfFile}"/>

称为data: () => ({ total: [], });的方法：

getAmount()

还有一个名为getAmount(item){ // gets individual amount and pushes it to the total array var amount = 0; // Skipping the amount calculation to keep the // question as small as possible amount = item.price + 10; this.total[this.total.length] = amount; return amount; }的计算属性：

getTotal()

在模板中，我正在访问getAmount（）方法和getTotal计算属性，如下所示：

getTotal(){
    if(this.total.length > 0){
      return this.total.reduce((x,y) => x+y);
    } else {
      return 0;
    }
  },

总金额始终为<v-data-table :headers="headers" :items="orderShares" hide-actions class="elevation-1" > <template slot="items" slot-scope="props"> <td class="text-xs-left">{{ props.item.order.order_code }}</td> <td class="text-xs-left">{{ getAmount(props.item) }}</td> </template> </v-data-table> <p> Total Amount: {{ getTotal }} </p>。但是我所期望的是，它应该与调用0方法一样多次。由于getAmount()会触发getAmount()道具的更改，因此理论上，计算属性total也应更新，因为它取决于getTotal。但这不是这里发生的事情。我该如何解决？

Answer 1

由于数组检测警告（https://vuejs.org/v2/guide/list.html#Caveats），您可能想在方法中执行此操作

this.total.push(amount)

此外，计算出的getTotal可以简单地是：

return this.total.reduce((x, y) => x + y, 0)

计算属性未更新

1 个答案: