Question

我正在使用Vue整理一个简单的报价页面，我试图对同一行中的两个项目进行汇总。我尝试使用计算属性，但在格式上苦苦挣扎。按照我的示例，该如何格式化以显示每一行的支出和价格的总和？

new Vue({
  el: '#search',
  data: {
    items: [
      { province: "Alberta", disbursement: 1, price: 300 },
      { province: "British Columbia", disbursement: 1, price: 75 },
      { province: "Manitoba", disbursement: 1, price: 10 },
      { province: "New Brunswick", disbursement: 1, price: 10 },
      { province: "Newfoundland & Labrador", disbursement: 1, price: 10 },
      { province: "Nova Scotia", disbursement: 1, price: 10 },
      { province: "Northwest Territories", disbursement: 1, price: 10 },
      { province: "Nunavut", disbursement: 1, price: 10 },
      { province: "Ontario", disbursement: 1, price: 10 },
      { province: "Prince Edward Island", disbursement: 1, price: 10 },
      { province: "Quebec", disbursement: 1, price: 10 },
      { province: "Saskatchewan", disbursement: 1, price: 10 },
      { province: "Yukon", disbursement: 1, price: 10 },
    ]
  },

computed: {
    total: function() {
    return parseInt(this.items.disbursement) +
        parseInt(this.items.price);
}
}

});

我的HTML格式如下

<tr v-for="item in items">
    <th scope="row"><input type="text" v-model="item.province"/></th>
    <td>$<input type="number" v-model="item.price"/></td>
    <td>$<input type="number" v-model="item.disbursement"/></td>    
    <td>${{total}}</td>
</tr>

我正在尝试在总计中添加items.dispossement + items.price

Answer 1

听起来像您想要迭代“项目”并汇总每个“项目”的属性的声音。

下面的代码将返回一个整数数组，但是您可以根据需要设置格式的数组值，只需编辑map函数返回的内容即可。

computed: {
    total: function() {
      return this.items.map(i => {
        return parseInt(i.disbursement) + parseInt(i.price)
      }
}

汇总表行中的两个项目

1 个答案: