How to disable input conditionally in Vue.js

In this tutorial, you’ll learn how to disable input field conditionally in Vue.js.

For example, we’ve got a form that asks the user to verify the email address. If entered correctly, this form becomes disabled and a feedback message pops up (I literally just came up with this example).

Here’s how the HTML template will look like:

<div id="app">
  <h2>Please, verify your email address:</h2>
  <input type="text" id="email" name="name" v-model="email" :disabled="validated ? '' : disabled" /><br><br>
  <h4 v-if="validated">
    Thank you for verifying your email address
  </h4>
</div>

Vue.js component

new Vue({
  el: "#app",
  data: {
    email: null,
    correctEmail: '[email protected]'
  },
  methods: {
  },
  computed: {
    validated() {
      if (this.email === this.correctEmail) {
      	return true
      }
    },
  }
})

The result:

If you find this post useful, please let me know in the comments below. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/disable-input-conditionally-in-vue-js

PS: Make sure you check other Vue.js tutorials, e.g. Top 5 CSS frameworks for your Vue.js project (2019), how to watch and react to params changes in Vue.js.