[Vuejs]-Vuejs Getting sum of elements in a table using vuejs

by

1👍

  • First, I dont’ think v-for="item, key in pass" is a valid syntax, shouldn’t it be v-for="(item, key) in pass" instead?
  • Second, In the Vue document, it said that you shouldn’t use v-for along with v-if in template. Instead, use computed property to do the prefilter that you want to perform.
<table id="example1" class="table table-bordered table-striped table-hover">
  <thead>
    <th>Decription</th>
    <th>Quantity</th>
    <th>Unit price</th>
    <th>Total</th>
    <th>Create on</th>
  </thead>
  <tbody>
    <tr v-for="(item, i) in filteredPass" :key="i">
      <td>{{ item.description }}</td>
      <td>{{ item.quantity }}</td>
      <td>{{ item.unit_price }}</td>                  
      <td>{{ item.quantity * item.unit_price }}</td>
      <td>{{ item.created_at }}</td><br>
    </tr>     
  </tbody>
</table>

computed: {
  filteredPass() {
    return this.pass.filter(item => this.list.quotation_no === item.quotation_id);
  },
  totalDatabase() {
    // replace this.pass with this.filteredPass if you want to perform on filtered data
    return this.pass.reduce((acc,item) => {
      return acc + item.quantity * item.unit_price;
    },0);
  }
}

Btw why do you use snake_case in js? Are you from python? We use camelCase here.

👤Loi Nguyen Huynh

Leave a comment