使用数据表在 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

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

对象中的这两个属性不是反应性的。在 data() 中声明的属性只是响应式的

但在运行时，您可以使用 this.$set 添加响应式属性

在这里工作的代码笔：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);
  }
})