Conditionally Disable Input Elements in Vue.js

  • Estimated read time: 4 min read
  • Written by Chad Campbell on May 25th 2017

Vue.js provides a rich template syntax that empowers you to create a dynamic user experience. At runtime, there are situations where you may want to conditionally disable input elements. For example, many apps let a user change their password. In that situation, a user first enters their new password. Then, they have to confirm that password. This is usually seen in a screen that looks something like this.

Change Password
A standard change password screen.

On a screen like this, you may want to disable the "confirm password" field until a user enters a value in the new password field. To do that, you need to bind to the input element's disabled attribute. As discussed in module 2 of my Vue.js training course, there are two ways to do this. One way is to use a JavaScript expression. The second way is to call a user-defined function.

Conditionally Disabling Input Elements via JavaScript Expression

You can conditionally disable input elements inline with a JavaScript expression. This compact approach provides a quick way to apply simple conditional logic. For example, if you only needed to check the length of the password, you may consider doing something like this.

<h3>Change Your Password</h3>
<div class="form-group">
  <label for="newPassword">Please choose a new password</label>
  <input type="password" class="form-control" id="newPassword" placeholder="Password" v-model="newPassword">
</div>

<div class="form-group">
  <label for="confirmPassword">Please confirm your new password</label>
  <input type="password" class="form-control" id="confirmPassword" placeholder="Password" v-model="confirmPassword" v-bind:disabled="newPassword.length === 0 ? true : false">
</div>

The code above comes from the demo associated with this blog post. If you look at the code in that demo, you'll see a data property named newPassword defined. That property holds the value of the newPassword field entered by the user. If you examine the demo code further, or, look at the code above, you'll notice that the password confirmation field includes this JavaScript expression:

newPassword.length === 0 ? true : false

This expression examines the length of the newPassword entered by the user. If the user has entered anything for their new password, this expresion will return false. This has the impact of enabling the password confirmation field. If the expression returns true, the input element will be disabled. While this expression is compact, it's also not very powerful. This is where a user-defined function can help.

Conditionally Disabling Input Element via User-Defined Functions

You may want to execute more logic before deciding whether to enable or disable an input element. For example, in the form above, you may want to verify that the "new password" field meets multiple requirements. You may want to ensure that the password exceeds a minimum number of characters. You may also want to ensure that at least one number is included in the password. Once all of the requirements are met, then the confirm password field can become enabled. When you need to use more logic, you can call a user-defined method in your template like this:

<h3>Change Your Password</h3>
<div class="form-group">
  <label for="newPassword">Please choose a new password</label>
  <input type="password" class="form-control" id="newPassword" placeholder="Password" v-model="newPassword">
</div>

<div class="form-group">
  <label for="confirmPassword">Please confirm your new password</label>
  <input type="password" class="form-control" id="confirmPassword" placeholder="Password" v-model="confirmPassword" v-bind:disabled="!doesPasswordMeetRequirements">
</div>

This sample code also comes from the demo. If you look at it, you'll notice that the inline JavaScript expression with the ternary operator was replaced with a reference to a user defined method. This snippet assumes that a method named doesPasswordMeetRequirements exists in the Vue instance's methods object. If you look in the demo code, you'll see that method defined like this:

doesPasswordMeetRequirements: function() {
  var result = false;
  if (this.newPassword.length >= 8) {
    var regex = new RegExp('.*[0-9].*');
    result = regex.test(this.newPassword);
  }
  return result;
}

This function expands on the original requirement and includes a regular expression to check for a number. If your requirements grow, your users may need help generating a new password. You may want to consider directing the user to a password generator. Still, I hope this post helps you understand how to conditionally disable input elements in Vue.js. If you want to learn more about Vue.js, I hope you'll check out my Vue.js training course on Pluralsight. If you don't have a Pluralsight subscription, I'd like to offer you a free trial.

If there are other Vue.js topics you're interested in, please mention them in the comments below. Thank you for reading.


Comments

comments powered by Disqus

Chad Campbell
Chad Campbell

Chad is an independent software professional. He has been named a Microsoft MVP five times. His books have been translated into multiple languages and distributed worldwide. He holds a computer science degree from Purdue University, where he also studied psychology.

Chad has built sites, apps, frameworks, libraries, and platforms using Java, .NET, and Node. He's ran his own startups and has created software for Fortune 100 companies. In short, Chad knows how to create software. From ideation to delivery. From start-to-finish.


Related Content

Follow Chad Online