Как рассчитать два значения элемента в Vue. js 2.6, Vue CLI 4, Vuetify 2.2

Question

Я использую текущий CRUD Vuetify Datatable UI Componen t (совместимый с Vue .js2), и я пытаюсь вычислить промежуточный итог продукта, умножая количество продукта на его цену, используя следующая статистика c данные в 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 }
            ],
        }
    }
}

Я пытаюсь получить следующий результат:

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

Но вместо этого я получаю сообщение «Нет текущих продуктов, добавленных по деталям». из <template v-slot:no-data>. Если я возьму Subtotal из массива, он покажет данные stati c без проблем, за исключением столбца промежуточных итогов, например:

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

В следующем примере это было сделано в предыдущих версиях:

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

Поскольку это решение больше не применимо для последних версий, как я могу рассчитать значение для обоих элементов, используя Vue. js 2.6, Vue CLI 4, Vuetify 2.2?

Answer 1

Ваш сценарий неверен:

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}) ),
      }
  }
}

Вы можете добавить Array.map после инициализации вашего массива, чтобы вычислить промежуточный итог.