vuejs Getting sum of elements in a table using vuejs

Question

I am using vuejs I want to get total amount in a table which contains quantity, unit price and their totals. Now I want to get their total after looping the database elements and using v-if to get certain elements. How do I do this...thanks in advance. This is my code

<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, key in pass" v-if="list.quotation_no === item.quotation_id">
          <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>

my json response is like below

{
 id : '5df323620a6f9635fc45b58f',
 agentId : "agent-1",
captureTime : "2019-12-13T05:36:25Z",
locId : '513',
orgId : '1',
saleItems : [{

        "code" : "7373631",
        "name" : "Eyeshadw Patina",
        "objectId" : "2f51acb2",
         activities : [
            {
                "price" : '1400',
                "qty" : '1',
                "ts" : "1576215385000"
            },

        ],
    },
],
sessionId : "13086",
stationId : "11",
tenderItems : {
    "106923bc" : {
        activities : [
            {
                "amount" : "4408",
                "ts" : "1576215571000"
            }
        ],
        code: "CA",
       description : "+INR_CURRENCY",
        objectId : "106923bc"
    }
}

}, { id : '5df323620a6f9635fc45b58f', agentId : "agent-2", captureTime : "2019-12-13T05:36:25Z", locId : '513', orgId : '1', saleItems : [{

    "code" : "7373631",
    "name" : "Eyeshadw Patina",
    "objectId" : "2f51acb2",
     activities : [
        {
            "price" : '1400',
            "qty" : '1',
            "ts" : "1576215385000"
        },

    ],
}]

}, { id : '5df323620a6f9635fc45b58f', agentId : "agent-3", captureTime : "2019-12-13T05:36:25Z", locId : '513', orgId : '1', saleItems : [{

    "code" : "7373631",
    "name" : "Eyeshadw Patina",
    "objectId" : "2f51acb2",
     activities : [
        {
            "price" : '1400',
            "qty" : '1',
            "ts" : "1576215385000"
        },

    ],
}]

}

Can we see your code? What have you attempted so far or whats stopping you? — adelriosantiago
– adelriosantiago, Commented Dec 16, 2019 at 18:31
I not able to do total amount of price * quantity can you help make some computed function? — full Error
– full Error, Commented Dec 16, 2019 at 18:34

tony19 · Accepted Answer · 2022-07-16 02:36:11Z

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.

Collectives™ on Stack Overflow

vuejs Getting sum of elements in a table using vuejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related