CODEWITHSUNDEEP
javascriptvue.js
T dhanunjay
T dhanunjay

Reputation: 820

How to change button color when condition satisfy in Vuejs?

computed: {
    empty() {
      return this.user.password === '' || this.user.confirmPassword === '';
    },
    equal() {
      return !this.user.password && !this.$v.user.password.valid === !this.user.confirmPassword && !this.$v.user.confirmPassword.sameAsPassword
    },
.no-empty {
           opacity: 1.5;
           background-color: #ee1d24;
          }
        
        
.empty {
          width: 160px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          font-size: 16px;
          font-weight: 600;
          color: #fff;
          background-color: #f68e91;
          border-radius: 10px;
          margin-top: 15px;
          padding: 0 20px;
          cursor: pointer;
          opacity: 0.5; 
          display: flex;
          justify-content: center;
          align-items: center;
          outline: none;
          border: none;
        }
<button
                      type="submit"
                      class="register-button-screen2"
                      value="Register"
                      :disabled="
                        (user.password && !$v.user.password.valid) ||
                        (user.confirmPassword &&
                          !$v.user.confirmPassword.sameAsPassword)
                      "
                      :class="[empty || !equal ? 'empty' : 'no-empty']"
                      @click="preset"
                    >
                      Clickme
                    </button>

In my equal method. Where it is comparing if password is equal or not.(that is working fine) But in my button under disabled with that condition i need to set in equal method.(So that it changes color if it is alphanumeric values only)

Upvotes: 1

Views: 1573

Answers (1)

Jordan
Jordan

Reputation: 2371

In VueJS you can set classes and styles using objects.

Take the following as an example from the VueJS docs:

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

When modifying classes using the object syntax, you can set the property value to a boolean variable.

If the boolean is false then the class is not applied. If the boolean is true then the class is applied.

Notice how you can combine the bound class object with a static class string that does not change.

You can also directly modify styles in a similar way:

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

This time instead of passing a boolean, you must pass a string value to the properties.

Hyphenated property names can be replaced with either camel case or kebab case (the latter requiring quotes).

Upvotes: 1

Related Questions