![](/img/trans.png)
[英]In Vue.js, how to call a function from Google Maps click event?
[英]How to delete row from datatable without interfering a computed function using a click event in vue.js
我正在使用 Vuetify 當前的CRUD Datatable UI 組件(與 Vue.js2 兼容)制作購物車。 以前,我遇到了一個問題,即通過將產品的數量乘以價格來計算產品的總和。 幸運的是,通過使用計算的 function detailsWithSubTotal()
來計算總數並將數據表的:item
值(以前的"details"
)替換為:item="detailsWithSubTotal"
,我得到了一個很好的解決方案,如下面的代碼所示:
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
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:item.delete="{ item }">
<v-icon small class="ml-3" @click="deleteDetail(detailsWithSubTotal, item)">
delete
</v-icon>
</template>
<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: 'Remove', value: 'delete', sortable: false },
{ 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() {
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
})
},
deleteDetail(arr,item){
var i= arr.indexOf(item);
if (i!==-1){
arr.splice(i,1);
}
},
}
}
</script>
雖然這有助於解決我之前的問題,但現在我無法刪除添加的細節。
在將@click
事件中的數組參數保持為@click="deleteDetail(details, item
) 並將數據表的:item
值保持為:items="details"
的同時,刪除按鈕可以正常工作,但是小計計算不會如下圖所示:
但是當將數組參數替換為@click="deleteDetail(detailsWithSubTotal, item
) 和:item
值替換為:items="detailsWithSubTotal"
時,它會計算小計但刪除按鈕停止工作。
如何刪除數據表上添加的行,同時不干擾detailsWithSubTotal()
計算的 function?
您可以嘗試將detail
本身添加到計算項作為原始項目的鏈接,並使用它從原始details
數組中刪除:
detailsWithSubTotal() {
return this.details.map((detail) => ({
...detail,
subtotal: detail.quantity * detail.price,
source: detail
}))
}
...
@click="deleteDetail(details, item)
...
deleteDetail(arr,item){
var i= arr.indexOf(item.source);
if (i!==-1){
arr.splice(i,1);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.