1

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
  • 22,578
  • 22
  • 103
  • 117
DigitalDevGuy
  • 83
  • 4
  • 14

1 Answers1

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.

Melchia
  • 22,578
  • 22
  • 103
  • 117
  • 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? – DigitalDevGuy Jun 16 '20 at 18:06
  • 1
    Her's the link to Array.map https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map – Melchia Jun 16 '20 at 18:35
  • Gotcha. Thank you for your help! – DigitalDevGuy Jun 16 '20 at 23:02