【发布时间】：2020-10-11 21:44:59
【问题描述】：
我正在使用 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:[] 数组中没有任何内容，除非在触发事件后被填充，否则我如何通过将产品的价格乘以其数量来计算总数？
【问题讨论】：
标签： javascript vue.js vuejs2 vuetify.js vue-cli-4