如何使用 Vue.js 2.6、Vue CLI 4、Vuetify 2.2 中的后端数据计算 javascript 中的总数以显示在数据表列中

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' },
                    {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}) ),
            }
        }
    }
</script>

添加 Array.map .map(detail => ({...detail, subtotal: detail.quantity*detail.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        |
|---------------------|------------------|---------------------|------------------|

既然我已经连接了后端，我不得不删除静态数据，因为它不再有用了，所以我稍微更改了代码。这是现在的样子：

已更新HTML:

<template>
    <v-layout align-start>
        <v-flex>
            <v-container grid-list-sm class="pa-4 white">
                <v-layout row wrap>
                    <v-flex xs12 sm8 md8 lg8 xl8>
                        <v-text-field @keyup.enter="searchBarcode()" v-model="code" label="Barcode">
                        </v-text-field>
                    </v-flex>
                    <v-flex xs12 sm12 md12 lg12 xl12>
                        <v-data-table :headers="headerDetails" :items="details" hide-default-footer 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-container>
        </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:[].map(detail => ({...detail, subtotal: detail.quantity*detail.price}) ),
                code: '',
            }
        }, 
        methods: {
            searchBarcode(){
                let me=this;
                axios.get("api/Products/SearchProductBarcode/" + this.code).then(function(response){
                    me.addDetail(response.data);
                }).catch(function(error){
                    console.log(error);
                }); 
            }
            addDetail(data = []){
            this.details.push(
                {idproduct: data['idproduct'],
                product: data['name'],
                quantity: 10,
                price: 150}
            );
        },
        }
    }
</script>

我正在尝试的是在文本字段中输入现有条形码并调用由 keyup.enter 事件触发的 searchBarcode()。如果数据库中存在条形码，它会检索其数据（产品名称、数量、价格）并将其添加到数据表中，如下图所示：

如您所见，数据按应有的方式显示，小计除外。如果 details:[] 数组中没有任何内容，除非它在触发事件后被填充，我如何通过将产品的价格乘以它的数量来计算总数？

Answer 1

计算属性来拯救

<template>
  <v-layout align-start>
    <v-flex>
      <v-container grid-list-sm class="pa-4 white">
        <v-layout row wrap>
          <v-flex xs12 sm8 md8 lg8 xl8>
            <v-text-field
              v-model="code"
              label="Barcode"
              @keyup.enter="searchBarcode()"
            >
            </v-text-field>
          </v-flex>
          <v-flex xs12 sm12 md12 lg12 xl12>
            <v-data-table
              :headers="headerDetails"
              :items="detailsWithSubTotal"
              hide-default-footer
              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-container>
    </v-flex>
  </v-layout>
</template>

<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: [],
      code: ''
    }
  },
  computed: {
    detailsWithSubTotal() {
      // Each new added detail, updates the detailsWithSubTotal
      // computed property, so you have the subtotal calc in
      // each detail
      return this.details.map((detail) => ({
        ...detail,
        subtotal: detail.quantity * detail.price
      }))
    }
  },
  methods: {
    searchBarcode() {
      axios
        .get('api/Products/SearchProductBarcode/' + this.code)
        .then(function(response) {
          this.addDetail(response.data)
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    addDetail(data = []) {
      this.details.push({
        idproduct: data['idproduct'],
        product: data['name'],
        quantity: 10,
        price: 150
      })
    }
  }
}
</script>

如何使用 Vue.js 2.6、Vue CLI 4、Vuetify 2.2 中的后端数据计算 javascript 中的总数以显示在数据表列中

How to calculate total in javascript to display in datatable column using backend data in Vue.js 2.6, Vue CLI 4, Vuetify 2.2

javascript

vue.js

vuejs2

vuetify.js

vue-cli-4