vue.js의 클릭 이벤트를 사용하여 계산된 함수를 방해하지 않고 데이터 테이블에서 행을 삭제하는 방법

vue.js의 클릭 이벤트를 사용하여 계산된 함수를 방해하지 않고 데이터 테이블에서 행을 삭제하는 방법

Vuetify의 현재 CRUD Datable UI 컴포넌트(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>

자바스크립트

<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>

이전 문제 해결에 도움이 되었지만, 지금은 추가된 세부사항을 삭제할 수 없습니다.

array 파라미터를 유지한 채@click로서 행사하다.@click="deleteDetail(details, item데이터 테이블의:item로서 중시하다.:items="details"삭제 버튼은 문제없이 동작하지만 다음 이미지와 같이 소계 계산은 동작하지 않습니다.

단, 양쪽 어레이 파라미터를 다음으로 치환하는 경우@click="deleteDetail(detailsWithSubTotal, item)와:item에 가치를 두다.:items="detailsWithSubTotal"소계를 계산하지만 삭제 버튼은 작동을 중지합니다.

데이터 테이블에서 추가된 행을 삭제하면서 어떻게 하면detailsWithSubTotal()계산 함수?

추가할 수 있습니다.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);
        }
    }

언급URL : https://stackoverflow.com/questions/62523759/how-to-delete-row-from-datatable-without-interfering-a-computed-function-using-a