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

Posted 2023-02-22

【中文标题】如何使用 vue.js 中的单击事件从数据表中删除行而不干扰计算函数

【英文标题】：How to delete row from datatable without interfering a computed function using a click event in vue.js

【发布时间】：2020-10-12 20:46:19

【问题描述】：

我正在使用 Vuetify 当前的 CRUD Datatable UI Component（与 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>

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

在将@click 事件中的数组参数保持为@click="deleteDetail(details, item) 并将数据表的:item 值保持为:items="details" 时，删除按钮可以正常工作，但是小计计算无法正常工作见下图：

但是当将数组参数替换为@click="deleteDetail(detailsWithSubTotal, item) 和:item 值替换为:items="detailsWithSubTotal" 时，它会计算小计但删除按钮停止工作。

如何在不干扰detailsWithSubTotal()计算函数的情况下删除数据表上添加的行？

【问题讨论】：

内部方法=deleteDetail，直接从数据属性中删除项目=this.details，而不是从计算属性中删除项目=detailsWithSubTotal，因为detailsWithSubTotal是@987654345的克隆@。检查MDN: Array.map，你会看到这样的描述：Array.map会创建一个新数组

【参考方案1】：

您可以尝试将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);
        
    

【讨论】：

我按照你说的试过了，效果很好！这正是我所需要的。非常感谢！我在哪里可以找到更多信息来解释有关将计算项目链接到原始项目的更多信息？

这只是其中一种方法。另一种方法是为一个项目指明一个模板，然后直接在Subtotal单元格模板中计算sum。