使用数据表在v-for列表中添加或删除项

Question

我在从列表中添加/删除项时遇到了一些问题(数据来自API，但我在这里做了一个小示例(。

我正在使用Vue和Vuetify中的数据表。

目前，数量没有出现，因此总计为NaN。

以下代码：

<template>
<v-container fluid>
<v-layout row wrap>
<v-flex sm12>
<v-data-table
:headers="headers"
:items="hadwareItems"
hide-actions
class="elevation-0"
>
<template v-slot:items="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-left">{{ props.item.qtyAvailable }}</td>
<td class="text-xs-left">
<v-btn
fab
small
:disabled="props.item.qtyAvailable <= 0"
outline
class="mx-2 hardware-qty-btn"
color="primary"
@click="removeItem(props.item)"
>
<p class="mb-0 title font-weight-medium text-xs-left">-</p>
</v-btn>
{{ props.item.qty }}
<v-btn
fab
small
:disabled="props.item.qtyAvailable <= 0"
outline
class="mx-2 hardware-qty-btn"
color="primary"
@click="addItem(props.item)"
>
<p class="mb-0 title font-weight-medium">+</p>
</v-btn>
</td>
<td class="text-xs-left">{{ props.item.price }}</td>
<td class="text-xs-left">
{{ props.item.totalPrice = props.item.qty * props.item.price }}
</td>
</template>
</v-data-table>
</v-flex>
</v-layout>
</v-container>
</template>

这里的JS：

<script>
export default {
data() {
return {
headers: [
{
text: "Android Options",
align: "left",
sortable: false,
value: "name"
},
{ text: "Qty Available", value: "qtyAvailable" },
{ text: "Qty", value: "qty" },
{ text: "Price", value: "price" },
{ text: "Total Price", value: "totalPrice" }
],
hadwareItems: [
{
name: "Frozen Yogurt",
qtyAvailable: 6,
price: 4.0
},
{
name: "Ice cream sandwich",
qtyAvailable: 9,
price: 4.3
},
{
name: "Eclair",
qtyAvailable: 0,
price: 6.0
},
{
name: "Cupcake",
qtyAvailable: 37,
price: 4.3
},
{
name: "Gingerbread",
qtyAvailable: 10,
price: 3.9
},
{
name: "Jelly bean",
qtyAvailable: 0,
price: 3.0
},
{
name: "Lollipop",
qtyAvailable: 2,
price: 20
},
{
name: "Honeycomb",
qtyAvailable: 32,
price: 6.5
},
{
name: "Donut",
qtyAvailable: 250,
price: 4.9
},
{
name: "KitKat",
qtyAvailable: 260,
price: 7
}
],
qty: 0,
totalPrice: 0
};
},
methods: {
addItem(hardwareItem) {
if (hardwareItem.qty < hardwareItem.qtyAvailable) {
hardwareItem.qty++;
} else {
alert("Can't select more than available Quantity");
}
},
removeItem(hardwareItem) {
hardwareItem.qty--;
if (hardwareItem.qty < 0) {
hardwareItem.qty = 0;
}
}
}
};
</script>

该示例也可在Codepen上获得：https://codepen.io/fabiozanchi/pen/LYVwaPy

谢谢！

Answer 1

您在计算属性中向现有对象添加了两个新属性数量和总价

对象中的这两个属性不是反应性的。在data((中声明的属性仅为反应

但在运行时，您可以使用它添加反应性属性$设置

在此处打开工作代码：https://codepen.io/chansv/pen/ExjqBBo?editors=1000

<div id="app">
<v-app id="inspire">
<v-data-table :headers="headers" :items="items" hide-actions class="elevation-0">
<template v-slot:items="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-left">{{ props.item.qtyAvailable }}</td>
<td class="text-xs-left">
<v-btn fab small :disabled="props.item.qtyAvailable <= 0" outline class="mx-2 hardware-qty-btn" color="primary" @click="removeItem(props.item)">
<p class="mb-0 title font-weight-medium text-xs-left">-</p>
</v-btn>
{{ props.item.qty }}
<v-btn fab small :disabled="props.item.qtyAvailable <= 0" outline class="mx-2 hardware-qty-btn" color="primary" @click="addItem(props.item)">
<p class="mb-0 title font-weight-medium">+</p>
</v-btn>
</td>
<td class="text-xs-left">{{ props.item.price }}</td>
<td class="text-xs-left">
{{ props.item.totalPrice = (props.item.qty * props.item.price).toFixed(2) }}
</td>
</template>
</v-data-table>
</v-app>
</div>

new Vue({
el: '#app',
data() {
return {
headers: [
{
text: "Android Options",
align: "left",
sortable: false,
value: "name"
},
{ text: "Qty Available", value: "qtyAvailable" },
{ text: "Qty", value: "qty" },
{ text: "Price", value: "price" },
{ text: "Total Price", value: "totalPrice" }
],
hadwareItems: [
{
name: "Frozen Yogurt",
qtyAvailable: 6,
price: 4.0
},
{
name: "Ice cream sandwich",
qtyAvailable: 9,
price: 4.3
},
{
name: "Eclair",
qtyAvailable: 0,
price: 6.0
},
{
name: "Cupcake",
qtyAvailable: 37,
price: 4.3
},
{
name: "Gingerbread",
qtyAvailable: 10,
price: 3.9
},
{
name: "Jelly bean",
qtyAvailable: 0,
price: 3.0
},
{
name: "Lollipop",
qtyAvailable: 2,
price: 20
}
],
items: [],
qty: 0,
totalPrice: 0
};
},
methods: {
addItem(hardwareItem) {
if (hardwareItem.qty < hardwareItem.qtyAvailable) {
hardwareItem.qty++;
} else {
alert("Can't select more than available Quantity");
}
},
removeItem(hardwareItem) {
hardwareItem.qty--;
if (hardwareItem.qty < 0) {
hardwareItem.qty = 0;
}
}
},
created() {
for (var i = 0; i < this.hadwareItems.length; i++) {
this.$set(this.items, i, { qty: 0, totalPrice: 0, ...this.hadwareItems[i]})
}
console.log(this.items);
}
})