时间戳

首页 > 解决方案 > 如何确保使用 vuejs 至少选中一个复选框

vue.js - 如何确保使用 vuejs 至少选中一个复选框

问题描述

我想保证至少有一个复选框被选中并且价格计算正确。

https://jsfiddle.net/snoke/1xrzy57u/1/

methods: {
    calc: function (item) {
        item.isChecked = !item.isChecked

        this.total = 0;
        for (i = 0; i < this.items.length; i++) {
            if(this.items[i].isChecked === true) {
                this.total += this.items[i].price;
            }
        }

        // fullPackagePrice
        if(this.items[0].isChecked === true && this.items[1].isChecked === true && this.items[2].isChecked === true) {
            this.total = this.fullPackagePrice;
        }

        // Trying to guarantee that have at least one checkbox checked
        if(this.items[0].isChecked === false && this.items[1].isChecked === false && this.items[2].isChecked === false) {
            this.total = this.items[0].price;
            this.items[0].isChecked = true;

        }
    }
}

标签： vue.js

解决方案

一个很好的方法是使用计算属性而不是方法。

在此处阅读有关这些的更多信息：https ://vuejs.org/v2/guide/computed.html#Computed-Properties

计算属性观察所有引用的数据，当其中一个发生变化时，该函数将重新运行并重新评估。

你可以做的是首先创建一个allowCheckout这样的计算属性：

allowCheckout() {
    return this.items[0].isChecked || this.items[1].isChecked || this.items[2].isChecked;
}

然后，您将在按钮中使用它，如下所示：

<button :disabled="allowCheckout"...

当没有检查任何项目时，这将禁用该按钮。

接下来，您还需要为总价创建第二个计算属性

totalPrice() {
    // Perform similar checking here to update this.total
}

最后，您需要将复选框更改为不再使用 v-on:change 而是使用 v-model 来代替每个复选框的相关参数。

这样，您的复选框状态将绑定到变量的真/假。

推荐阅读