[Vuejs]-Unable to calculate product qty

0👍

Try below steps. Hopefully it will helps you.

Step 1: productItems should be an array

Step 2: Calculate functions be like

computed: {
consumptionTotal () {
  return this.productItems.reduce((total, item) => {
    total += item.unit
    return total
  }, Number(0))
}
}

Step 3: HTML template will be like

 <div class="content-header">
  <div class="container">
      <div class="row">
          <div class="col-sm-12">
              <div class="card">
                  <div class="card-body">
                      <div class="row">
                          <div class="col-lg-12">
                              <table class="table">
                                  <thead>
                                  <tr>
                                    <th>Id</th>
                                    <th>Name</th>
                                    <th>Qty</th>
                                  </tr>
                                  </thead>
                                  <tbody>
                                  <tr v-for="item in productItems" :key="item.id">
                                    <td>{{item.id}}</td>
                                    <td>
                                        {{item.name}}
                                    </td>
                                    <td>
                                      <input style="width: 100px; margin-left: 0; display: inline" type="number" class="form-control" :value="item.unit">
                                    </td>
                                  </tr>
                                  <tr>
                                    <td></td>
                                    <td>
                                      Consumption total: {{ consumptionTotal }}
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>

DEMO

Leave a comment