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?

Answer 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.