Question

我用Vue.js编写了一个简单的购物车应用程序：

var app = new Vue({
    el: "#app",
    data: {
        items: [
            { id: 1, name: "Item 00", spec: "spec 00", price: 400, quantity: 1, unit: "unit 00" },
            { id: 2, name: "Item 01", spec: "spec 01", price: 416, quantity: 1, unit: "unit 01" },
        ]
    },
    methods: {
        isEmpty: function () {
            return this.items.length > 0;
        },
        handleReduce: function (index) {
            if (this.items[index].quantity === 1) {
                return;
            }

            this.items[index].quantity--;
        },
        handleAdd: function (index) {
            this.items[index].quantity++;
        },
        handleRemove: function (index) {
            this.items.splice(index, 1);
        },
        isDisabled: function (index) {
            return this.items[index].quantity === 1;
        }
    },
    computed: {
        total: function () {
            var total = 0;

            for (var i = 0; i < this.items.length; i++) {
                total += this.items[i].quantity * this.items[i].price;
            }

            return total;
        },
        disabled: function (value) {
            return this.items.length < 1;
        }
    },
    filters: {
        numberFormat: function (value) {
            return value.toString().replace(/\B(?=(\d{3})+$)/g, ',');
        }
    }
});

我的HTML是：

<template v-if="isEmpty()">
    <tr v-for="(item, index) in items">
        <td>{{ index+1 }}.</td>
        <td>{{ item.name }}</td>
        <td>{{ item.spec }}</td>
        <td class="text-right">{{ item.price | numberFormat }}</td>
        <td>
        <button class="btn btn-sm btn-secondary" @click="handleReduce(index)" :disabled="isDisabled(index)">-</button>
        {{ item.quantity }}
        <button class="btn btn-sm btn-secondary" @click="handleAdd(index)">+</button>
        </td>
        <td>{{ item.unit }}</td>
        <td class="text-right">{{ (item.quantity * item.price) | numberFormat }}</td>
        <td class="text-right"><button class="btn btn-sm btn-danger" @click="handleRemove(index)">Remove</button></td>
    </tr>
</template>

<template v-else>ereNo Items h</template>

<h5 class="text-right mt-5">Total：{{ total | numberFormat }}</h5>
<button class="btn btn-primary" :disabled="disabled">Confirm</button>

我要在项目数组为空时禁用“确认按钮”，并且已经将按钮上的disabled属性绑定。但是当我清空items数组时，它不起作用。

如何正确禁用按钮？任何帮助表示赞赏。谢谢。

Answer 1

对我来说，按钮逻辑看起来不错，但是您的isEmpty()方法逻辑名称是从后到前。仅当您将其命名为isNotEmpty时才有意义。

我将使用相同的计算属性来确定两者，因为在v-if中使用的方法是highly inefficient。

computed: {
  isEmpty: ({ items }) => items.length === 0
}

例如（以及其他一些改进）

new Vue({
  el: "#app",
  data: () => ({
    items: [{"id":1,"name":"Item 00","spec":"spec 00","price":400,"quantity":1,"unit":"unit 00"},{"id":2,"name":"Item 01","spec":"spec 01","price":416,"quantity":1,"unit":"unit 01"}]
  }),
  methods: {
    handleReduce (item) {
      item.quantity = Math.max(1, item.quantity - 1)
    },
    handleAdd (item) {
      item.quantity++;
    },
    handleRemove (index) {
      this.items.splice(index, 1);
    }
  },
  computed: {
    total: ({ items }) => items.reduce((total, { quantity, price }) =>
        total + quantity * price, 0),
    isEmpty: ({ items }) => items.length === 0
  },
  filters: {
    numberFormat: function(value) {
      return value.toString().replace(/\B(?=(\d{3})+$)/g, ',');
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<table id="app">
  <tbody>
  <template v-if="!isEmpty">
    <tr v-for="(item, index) in items" :key="item.id">
      <td>{{ index+1 }}.</td>
      <td>{{ item.name }}</td>
      <td>{{ item.spec }}</td>
      <td class="text-right">{{ item.price | numberFormat }}</td>
      <td>
      <button class="btn btn-sm btn-secondary" @click="handleReduce(item)" :disabled="item.quantity === 1">-</button>
      {{ item.quantity }}
      <button class="btn btn-sm btn-secondary" @click="handleAdd(item)">+</button>
      </td>
      <td>{{ item.unit }}</td>
      <td class="text-right">{{ (item.quantity * item.price) | numberFormat }}</td>
      <td class="text-right"><button class="btn btn-sm btn-danger" @click="handleRemove(index)">Remove</button></td>
    </tr>
  </template>

  <template v-else><tr><td>ereNo Items h</td></tr></template>
  </tbody>
  <tfoot>
  <tr><td colspan="8">
  <h5 class="text-right mt-5">Total：{{ total | numberFormat }}</h5>
  </td></tr>
  <tr><td colspan="8">
  <button class="btn btn-primary" :disabled="isEmpty">Confirm</button>
  </td></tr>
</table>

Vue.js-当数据数组为空时如何禁用按钮

1 个答案: