How to calculate two item values in Vue.js 2.6, Vue CLI 4, Vuetify 2.2

Question

I'm using Vuetify's current CRUD Datatable UI Component (compatible with Vue.js2) and I'm trying to calculate the subtotal of a product multiplying the product's quantity with its price using the following static data in JavaScript:

HTML:

<template>
    <v-layout align-start>
        <v-flex>
            <v-container grid-list-sm class="pa-4 white">
                <v-layout row wrap>
                    <v-flex xs12 sm12 md12 lg12 xl12>
                    <v-data-table :headers="headerDetails" :items="details" hide-actions class="elevation-1">
                        <template v-slot:no-data>
                            <h3>There are no current products added on details.</h3>
                        </template>
                    </v-data-table>
                </v-flex>
            </v-layout>
        </v-flex>
    </v-layout>
</template>

JAVASCRIPT

<script>
import axios from 'axios'
export default {
    data(){
        return{

            headerDetails: [
                { text: 'Product', value: 'product', sortable: false },
                { text: 'Quantity', value: 'quantity', sortable: false },
                { text: 'Price', value: 'price', sortable: false },
                { text: 'Subtotal', value: 'subtotal', sortable: false },
            ],
            details:[
                {product:'Product 1', quantity:'5', price:'10', subtotal: quantity*price },
                {product:'Product 2', quantity:'5', price:'20', subtotal: quantity*price },
                {product:'Product 3', quantity:'20', price:'15', subtotal: quantity*price },
                {product:'Product 4', quantity:'10', price:'25', subtotal: quantity*price }
            ],
        }
    }
}

What I'm trying to get is the following result:

|---------------------|------------------|---------------------|------------------|
|       Product       |     Quantity     |        Price        |     Subtotal     |
|---------------------|------------------|---------------------|------------------|
|      Product 1      |         5        |         10          |        50        |
|---------------------|------------------|---------------------|------------------|
|      Product 2      |         5        |         20          |       100        |
|---------------------|------------------|---------------------|------------------|
|      Product 3      |        20        |         15          |       300        |
|---------------------|------------------|---------------------|------------------|
|      Product 4      |        10        |         25          |       250        |
|---------------------|------------------|---------------------|------------------|

But instead, I get the "There are no current products added on details." from the <template v-slot:no-data>. If I take out Subtotal from the array, it shows the static data with no problem except the subtotal column like this:

|---------------------|------------------|---------------------|------------------|
|       Product       |     Quantity     |        Price        |     Subtotal     |
|---------------------|------------------|---------------------|------------------|
|      Product 1      |         5        |         10          |                  |
|---------------------|------------------|---------------------|------------------|
|      Product 2      |         5        |         20          |                  |
|---------------------|------------------|---------------------|------------------|
|      Product 3      |        20        |         15          |                  |
|---------------------|------------------|---------------------|------------------|
|      Product 4      |        10        |         25          |                  |
|---------------------|------------------|---------------------|------------------|

The following example is how it's done in previous versions:

<v-data-table :headers="headerDetails" :items="details" hide-actions class="elevation-1">
    <template slot="items" slot-scope="props">
        <td>{{ props.item.product }}</td>
        <td>{{ props.item.quantity}}</td>
        <td>{{ props.item.price }}</td>
        <td>{{ props.item.quantity * props.item.price }}</td>
    </template>
</v-data-table>

Since this solution is no longer viable for the latest versions, how can I calculate the value with both items using Vue.js 2.6, Vue CLI 4, Vuetify 2.2?

Melchia · Accepted Answer · 2020-06-16 18:35:47Z

1

Your script is incorrect:

export default {
  data(){
      return{

          headerDetalles: [
              { text: 'Product', value: 'product', sortable: false },
              { text: 'Quantity', value: 'quantity', sortable: false },
              { text: 'Price', value: 'price', sortable: false },
              { text: 'Subtotal', value: 'subtotal', sortable: false },
          ],
          details:[
              {product:'Product 1', quantity:'5', price:'10' },
              {product:'Product 2', quantity:'5', price:'20' },
              {product:'Product 3', quantity:'20', price:'15' },
              {product:'Product 4', quantity:'10', price:'25' }
          ].map(detail => ({...detail, subtotal: detail.quantity*detail.price}) ),
      }
  }
}

You can add a Array.map after the initialization of your array to calculate the the subtotal.

edited Jun 16, 2020 at 18:35

answered Jun 16, 2020 at 17:49

Melchia

24.5k23 gold badges110 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DigitalDevGuy Over a year ago

Excuse the typo, it happened while translating the code from Spanish to English. I fixed the typo and added the map after initializing the array and it works! Thank you very much! Where could I find more documentation about adding maps after initializing arrays?

Melchia Over a year ago

Her's the link to Array.map developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

DigitalDevGuy Over a year ago

Gotcha. Thank you for your help!

Collectives™ on Stack Overflow

How to calculate two item values in Vue.js 2.6, Vue CLI 4, Vuetify 2.2

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related