如何在 Vue.js 2.6、Vue CLI 4、Vuetify 2.2 中计算两个项目值

Question

我正在使用 Vuetify 当前的 CRUD Datatable UI Component（与 Vue.js2 兼容），我正在尝试使用以下方法计算产品的小计，即产品数量乘以价格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> 得到了 "There are no current products added on details."。如果我从数组中取出小计，它显示的静态数据没有问题，除了小计列是这样的：

|---------------------|------------------|---------------------|------------------|
|       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 来计算小计。

如何在 Vue.js 2.6、Vue CLI 4、Vuetify 2.2 中计算两个项目值

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

javascript

vue.js

vuejs2

vuetify.js

vue-cli-4