我正在使用 Vuetify 当前的CRUD Datatable UI 组件（与 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>
我正在尝试在文本字段中输入现有的条形码并调用由事件searchBarcode()触发的条形码keyup.enter。如果条形码存在于数据库中，它会检索其数据（产品名称、数量、价格）并将其添加到数据表中，如下图所示：
如您所见，数据按应有的方式显示，但小计除外。details:[]如果数组中没有任何内容，除非在触发事件后填充，否则我如何通过将产品的价格乘以其数量来计算总数？