Me gustaría garantizar que al menos una casilla de verificación esté marcada y que el precio se haya calculado correctamente.

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;

        }
    }
}
    
1
NAG 25 ago. 2020 a las 18:10

2 respuestas

La mejor respuesta

Una buena opción para esto sería utilizar propiedades calculadas en lugar de un método.

Lea más sobre estos aquí: https://vuejs.org/v2/guide/ computed.html # Computed-Properties

Una propiedad calculada observa todos los datos referenciados y cuando una pieza cambia, la función se vuelve a ejecutar y evaluar.

Lo que podría hacer es crear primero una propiedad calculada allowCheckout como esta:

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

Luego lo usará dentro del botón de esta manera:

<button :disabled="allowCheckout"...

Esto desactivará el botón cuando no haya elementos marcados.

A continuación, también querrá crear una segunda propiedad calculada por el precio total

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

Por último, querrá cambiar sus casillas de verificación para que ya no use v-on: change sino que use v-model para el parámetro relevante para cada uno.

De esta manera, el estado de su casilla de verificación estará vinculado a la verdad / falsedad de las variables.

3
Jordan 25 ago. 2020 a las 15:31

Si aún desea seguir con su método, puede implementarlo como se muestra en este violín actualizado y establezca una variable atLeastOneItemIsChecked como esta:

this.atLeastOneItemIsChecked = this.items.find(item => item.isChecked) !== undefined

No obligue al usuario a marcar siempre una casilla de verificación. En su lugar, muestre una pista y desactive el botón usando :disable y tailwind css resultando en esto:

Visualization of the solution

1
Tommy 25 ago. 2020 a las 15:41