Disable input conditionally (Vue.js)

Coping with Complexity

With Vue.js, not even complex conditions can complicate your relationship with form inputs. Easily cope using a computed property:

<template>
  <input :disabled="isDisabled" type="text" />
</template>

<script>
export default {
  data() {
    return {
      validated: 0, // Going from ground zero
      formSubmitted: false
    };
  },
  computed: {
    isDisabled() {
      // Number trick - A "+ validated" a day keeps the type issue away!
      return +this.validated === 1 || this.formSubmitted;
    }
  }
}
</script>


Computed properties: Working behind the scenes, keeping your data reactive and cache-friendly.

Interaction-based Conditions

When a bit of fun interactivity is needed, use a method and event handler to control the disabled state on the fly:

<template>
  <button @click="toggleInput">Toggle Input</button>
  <input :disabled="isInputDisabled" type="text" />
</template>

<script>
export default {
  data() {
    return {
      isInputDisabled: false
    };
  },
  methods: {
    toggleInput() {
      // This method is like, "I got the power!"
      this.isInputDisabled = !this.isInputDisabled;
    }
  }
}
</script>


This way, the disabled state is fully interactive, based on user actions. Your users will thank you!

The Art of Complex Logic

When things get heavier and one condition is no longer enough, methods or watchers might be your new best friends:

<template>
  <input :disabled="isComplexlyDisabled" type="text" />
</template>

<script>
export default {
  data() {
    return {
      complexConditions: {
        hasErrors: false,
        isLoading: true,
        isUnderLimit: false,
      },
    };
  },
  computed: {
    isComplexlyDisabled() {
      const { hasErrors, isLoading, isUnderLimit } = this.complexConditions;
      return hasErrors || isLoading || isUnderLimit;
    }
  }
}
</script>


Administer the hulking beast of compound conditions and perform actions in response to data changes, flexing your Vue.js muscle.

Advanced HTML Manipulation

Boolean Best Practices

Making your code indirect-kiss-friendly with boolean values (true or false) when working with the :disabled attribute. Just number-crush numbers, unless that's the object of your affection:

<input :disabled="validated === 1">


Inline Ternary Operator

For some quick and sleek syntax action, check out our ternary operator:

<input :disabled="isLoading ? true : false">


Better yet, if isLoading is feeling boolean-ish, get more intimate:

<input :disabled="isLoading">


The Boolean Transformation

Transform any value into a true or false superhero with a double NOT operator:

<input :disabled="!!potentialFalsyValue">
