Javascript 使用数据表添加或删除v-for列表中的项_Javascript_Vue.js_Vuetify.js

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

javascript vue.js

Javascript 使用数据表添加或删除v-for列表中的项,javascript,vue.js,vuetify.js,Javascript,Vue.js,Vuetify.js,我在添加/删除列表中的项目时遇到一些问题（数据来自API，但我在这里做了一个小示例）我正在使用Vue和Vuetify中的数据表目前，数量未显示，因此总数为NaN 代码如下： <template> <v-container fluid> <v-layout row wrap> <v-flex sm12> <v-data-table :headers="headers"

我在添加/删除列表中的项目时遇到一些问题（数据来自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>


{{props.item.name}
{{props.item.qtyAvailable}
-
{{props.item.qty}
+
{{props.item.price}
{{props.item.totalPrice=props.item.qty*props.item.price}}

这里是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>


导出默认值{
数据（）{
返回{
标题：[
{
文本：“Android选项”，
对齐：“左”，
可排序：false，
值：“名称”
},
{文本：“可用数量”，值：“可用数量”}，
{文本：“数量”，值：“数量”}，
{文本：“价格”，值：“价格”}，
{文本：“总价”，值：“总价”}
],
hadwareItems：[
{
名称：“冷冻酸奶”，
有效数量：6，
价格：4.0
},
{
名称：“冰淇淋三明治”，
有效数量：9，
价格:4.3
},
{
名称：“Eclair”，
qtyAvailable:0，
价格：6.0
},
{
名称：“纸杯蛋糕”，
有效数量：37，
价格:4.3
},
{
名称：“姜饼”，
有效数量：10，
价格:3.9
},
{
名称：“果冻豆”，
qtyAvailable:0，
价格：3.0
},
{
名称：“棒棒糖”，
有效数量：2，
价格:20
},
{
名称：“蜂巢”，
有效数量：32，
价格:6.5
},
{
名称：“甜甜圈”，
有效数量：250，
价格:4.9
},
{
姓名：“KitKat”，
有效数量：260，
价格:7
}
],
数量:0，
总价：0
};
},
方法：{
附加项（硬件项）{
如果（硬件项数量<硬件项数量可用）{
硬件项目数量++；
}否则{
警报（“不能选择超过可用数量”）；
}
},
移除项目（硬件项目）{
硬件项目数量--；
如果（硬件项目数量<0）{
硬件项目数量=0；
}
}
}
};

该示例也可在Codepen上获得：

谢谢

您已向computed property中的现有对象添加了2个新属性数量和总价

对象中的这两个属性不是反应性的。data（）中声明的属性只是被动的

但在运行时，您可以使用

在此处使用代码笔：


{{props.item.name}
{{props.item.qtyAvailable}
-
{{props.item.qty}
+
{{props.item.price}
{{props.item.totalPrice=（props.item.qty*props.item.price）.toFixed（2）}
新Vue({
el:“#应用程序”，
数据（）{
返回{
标题：[
{
文本：“Android选项”，
对齐：“左”，
可排序：false，
值：“名称”
},
{文本：“可用数量”，值：“可用数量”}，
{文本：“数量”，值：“数量”}，
{文本：“价格”，值：“价格”}，
{文本：“总价”，值：“总价”}
],
hadwareItems：[
{
名称：“冷冻酸奶”，
有效数量：6，
价格：4.0
},
{
名称：“冰淇淋三明治”，
有效数量：9，
价格:4.3
},
{
名称：“Eclair”，
qtyAvailable:0，
价格：6.0
},
{
名称：“纸杯蛋糕”，
有效数量：37，
价格:4.3
},
{
名称：“姜饼”，
有效数量：10，
价格:3.9
},
{
名称：“果冻豆”，
qtyAvailable:0，
价格：3.0
},
{
名称：“棒棒糖”，
有效数量：2，
价格:20
}
],
项目：[]，
数量:0，
总价：0
};
},
方法：{
附加项（硬件项）{
如果（硬件项数量<硬件项数量可用）{
硬件项目数量++；
}否则{
警报（“不能选择超过可用数量”）；
}
},
移除项目（硬件项目）{
硬件项目数量--；
如果（硬件项目数量<0）{
硬件项目数量=0；
}
}
},
创建（）{
for（var i=0；i

你所说的

数量

和

总价

到底是什么意思？对于每一行还是每一列？这是针对每一行的。totalPrice是所选数量（默认为0，但现在为银行）*价格。@FabioZanchi，数量从0开始或统计从“可用数量”开始？数量从0开始，订购数量不能大于qtyAvailable@FabioZanchi，让我知道下面的答案解决了您的问题

<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);
  }
})