[Vuejs]-Adding a Navigation Guard for a Vue.js view

by

0👍

I’m not sure I fully understand what you’re trying to do, but if you’d like a button which is disabled/not disabled based on if a box is ticked:

  1. Put a checkbox in your HTML

  2. Put a button in your HTML

  3. Give the checkbox a v-model e.g. v-model="checked"

  4. Give the button a conditional disabled attribute e.g. :disabled="buttonIsDisabled"

  5. Put 2 new properties in your vue class e.g.
    buttonIsDisabled: boolean = true; checked: boolean = false;

  6. Watch the checked value. When it is changed, it will change the button property e.g.:

    @Watch("checked")
    onChanged(newValue: any, oldValue: any) {
    if (this.checked === true) {
    this.checked = newValue
    return this.buttonIsDisabled = false
    }
    if (this.checked === false) {
    this.checked = newValue
    return this.buttonIsDisabled = true
    }
    }

This example uses the way the code is formatted in my project it may be formatted differently in yours, but the same method should apply if you’re trying to do what i think.

Leave a comment