[英]How to delete row from datatable without interfering a computed function using a click event in vue.js
I am making a shopping cart using Vuetify's current CRUD Datatable UI Component (compatible with Vue.js2).我正在使用 Vuetify 当前的CRUD Datatable UI 组件(与 Vue.js2 兼容)制作购物车。 I previously had a problem to calculate the total of a product by multiplying the product's quantity with its price.
以前,我遇到了一个问题,即通过将产品的数量乘以价格来计算产品的总和。 Fortunately, I was given a great solution by using a computed function
detailsWithSubTotal()
to calculate the total and replacing the datatable's :item
value (previously "details"
) to :item="detailsWithSubTotal"
as you can see in the following code:幸运的是,通过使用计算的 function
detailsWithSubTotal()
来计算总数并将数据表的:item
值(以前的"details"
)替换为:item="detailsWithSubTotal"
,我得到了一个很好的解决方案,如下面的代码所示:
HTML 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 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>
Though this helped to solve my previous problem, now I can't delete the added detail.虽然这有助于解决我之前的问题,但现在我无法删除添加的细节。
While keeping the array parameter in the @click
event as @click="deleteDetail(details, item
) and the datatable's :item
value as :items="details"
, the delete button works with no problem, but then the subtotal calculation does not work as you can see in the following image:在将
@click
事件中的数组参数保持为@click="deleteDetail(details, item
) 并将数据表的:item
值保持为:items="details"
的同时,删除按钮可以正常工作,但是小计计算不会如下图所示:
But when replacing both array parameter to @click="deleteDetail(detailsWithSubTotal, item
) and :item
value to :items="detailsWithSubTotal"
, it calculates the subtotal but the delete button stops working.但是当将数组参数替换为
@click="deleteDetail(detailsWithSubTotal, item
) 和:item
值替换为:items="detailsWithSubTotal"
时,它会计算小计但删除按钮停止工作。
How can I delete the added row on the datatable while not interfering with the detailsWithSubTotal()
computed function?如何删除数据表上添加的行,同时不干扰
detailsWithSubTotal()
计算的 function?
You can try to add detail
itself to a computed item as a link to an original item and use it to delete from the original details
array:您可以尝试将
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.