How to change button color when condition satisfy in Vuejs?

Question

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)

Does this answer your question? How to change button color using ternary condition satisfy in Vuejs? — tauzN
– tauzN, Commented Apr 16, 2021 at 17:11
@tauzN, I have raised this question previously, And it has been closed because there i am asking multiple questions, So they suggested me to ask questions individually. So i posted this question again with specific question. — T dhanunjay
– T dhanunjay, Commented Apr 16, 2021 at 17:14
@tauzN Ternaries are very limited and not the suggested way for programatically altering classes and styles in Vue. You can see my answer for a much more flexible approach :) — Jordan
– Jordan, Commented Apr 16, 2021 at 18:18

tony19 · Accepted Answer · 2022-07-16 03:54:48Z

1

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).

edited Jul 16, 2022 at 3:54

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 16, 2021 at 18:14

Jordan

2,38110 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

T dhanunjay Over a year ago

Thanks for answering. But issue is , In the button i have :disabled where this is stopping until user enter some alphanumeric characters in password field it's stopping. But in my equal() it's not checking with :disabled in button. that's why button color changes, If password and confirm password (if it's not alphanumeric also).

T dhanunjay Over a year ago

Ok will try that meanwhile, But button will only change color once if it matches with only disabled condition in button. Thanks :)

Jordan Over a year ago

You still haven't fixed it. Make it so I can run the sandbox and I iwll take a look

T dhanunjay Over a year ago

Tried it, as i am new to this concept Struck there. This is the codesandbox link i tried with checking to change color only if matches with alphanumeric characters. But there are some errors.. codesandbox.io/s/blissful-chebyshev-gvwpe?file=/src/App.vue

Collectives™ on Stack Overflow

How to change button color when condition satisfy in Vuejs?

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related