Javascript 如何使用vue.js中的单击事件从datatable中删除行而不干扰计算函数

我正在使用Vuetify的current（与Vue.js2兼容）制作一个购物车。我以前遇到过一个问题，就是用产品的数量乘以产品的价格来计算产品的总量。幸运的是，通过使用计算函数

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>

从“axios”导入axios
导出默认值{
数据（）{
返回{
标题详情：[
{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.map（（detail）=>({
细节
小计：detail.quantity*detail.price
}))
}
},
方法：{
searchBarcode（）{
axios
.get（'api/Products/SearchProductBarcode/'+此.code）
.然后（功能（响应）{
this.addDetail（response.data）
})
.catch（函数（错误）{
console.log（错误）
})
},
addDetail（数据=[]）{
这个。细节。推({
idproduct:数据['idproduct']，
产品：数据['name']，
数量：10，
价格：150
})
},
删除详细信息（arr，项目）{
var i=arr.indexOf（项目）；
如果（i！==-1）{
阵列拼接（i，1）；
}
},
}
}

虽然这有助于解决我以前的问题，但现在我无法删除添加的细节

将

@click

事件中的数组参数保持为

@click=“deleteDetail（details，item

），将数据表的

：item

值保持为

：items=“details”

，删除按钮不会出现问题，但小计计算不会如下图所示：

但是，当将两个数组参数替换为

@click=“deleteDetail（detailsWithSubTotal，item

）和

：item

值替换为

：items=“detailsWithSubTotal”

时，它会计算小计，但删除按钮停止工作

---

如何在不干扰

detailsWithSubTotal（）

computed函数的情况下删除数据表上添加的行？

您可以尝试将

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);
        }
    }

---

在方法=

deleteDetail

中，直接从数据属性=

this.details

中删除项，而不是从计算属性=

detailsWithSubTotal

中删除项，因为

detailsWithSubTotal

是

this.details

的克隆。选中后，您将看到以下描述：

Array.map

将创建一个新的阵列我按您所说的那样进行了尝试，效果良好！这正是我需要的。非常感谢你！我在哪里可以找到更多信息来解释如何将计算项目链接到原始项目？这只是其中一种方法。备选方案之一是为项目指定模板，并直接在

小计

单元格模板中计算

总和

。