我正在使用 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
}))
}
},
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.source);
if (i!==-1){
arr.splice(i,1);
}
},
}
}
</script>
在我一直用作构建此购物车的参考的示例中，他没有显示来自 javascript 的数据，而是来自 HTML 的数据<td>，props.items正如您在下面的代码中看到的那样：
以前的版本（我发现的这个例子来自 2 岁以前的 vue.js 版本）：
<template slot="items" slot-scope="props">
<td class="justify-center layout px-0">
<v-icon small class="ml-3" @click="deleteDetail(details, props.item)">
delete
</v-icon>
</td>
<td>{{ props.item.product }}</td>
<td><v-text-field type="number" v-model="props.item.quantity"></v-text-field></td>
<td><v-text-field type="number" v-model="props.item.price"></v-text-field></td>
<td>$ {{ props.item.quantity * props.item.price }}</td>
</template>
他的例子是这样的：
虽然这是我的数据表在我的代码中的样子（使用硬编码quantity和price值时）：
由于我没有使用 any<td>或 any props，我如何在数据表中实现一个文本字段并将它们链接到它们的值以便能够计算产品总数？
