Vuejs2 Vue Js如何计算表上的值并在页脚上显示总和

我想使用引导表和Vue Js创建简单发票

基本上，我想要的如下图所示：

我已经尝试了下面的代码，但我对两件事感到困惑

我该怎么做

1） 计算

总成本

，并将其显示为

页脚摘要

2） 将

rate

和

qnty

相乘，并显示在

cost

上相应的输入框中

newvue({
el:“#应用程序”，
方法：{
addService（）{
this.model.services.push（{}）；
}
},
数据：{
型号：{
服务：[]
},
字段：[{
键：“速率”，
标签：“费率”
},
{
钥匙：“qnty”，
标签：“Qnty”
},
{
关键：“成本”，
标签：“成本”
}
]
}
})

添加项目/服务

这里有一种快速方法，可以计算项目成本

通过使用watch t更新数据，可以在此处进行改进，以更新项目中的项目总数

但是，总计是使用计算值进行的，该计算值使用

reduce

查找总计

  computed: {
    total: function() {
      return this.model.services.reduce(function(a, c){return a + Number((c.rate*c.qnty) || 0)}, 0)
    }
  },

以下是完整的代码：

Vue.config.productionTip=false
Vue.组件（'图标'{
模板：“”
})
新Vue({
el:“#应用程序”，
方法：{
addService（）{
this.model.services.push（{}）；
}
},
计算：{
总计：函数（）{
返回this.model.services.reduce（函数（a，c）{返回a+Number（（c.rate*c.qnty）| | 0）}，0）
}
},
数据：{
型号：{
服务：[]
},
字段：[{
键：“速率”，
标签：“费率”
},
{
钥匙：“qnty”，
标签：“Qnty”
},
{
关键：“成本”，
标签：“成本”
}
]
}
})

添加项目/服务
全部的
{{total}}

谢谢您的回答，我已经得到了解决方案或我的第二个问题，但对于第一个问题，您已将

总计

移到

b表

之外，并使用计算方法显示总计。但是我有一些特定的布局来显示总数，这在问题的屏幕截图上。使用

底行

作为模板，如这里所述

底行

。这就是我需要的。谢谢你给我指明了正确的方向。