我正在使用 Vuetify 當前的CRUD Datatable UI 組件（與 Vue.js2 兼容）制作購物車，我正在嘗試type="number"為兩列添加一個文本字段，quantity并將price它們鏈接到它們各自的值以計算它們的總數。在這里，您可以看到它如何添加、從 2 個靜態值計算總計（我暫時使用計算函數來測試小計計算），并在以下代碼中毫無問題地刪除：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(details, 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,        source: detail      }))    }  },在我一直用作構建此購物車的參考的示例中，他沒有顯示來自 javascript 的數據，而是來自 HTML 的數據<td>，props.items正如您在下面的代碼中看到的那樣：