Vue button toggling CSS using checkbox

Question

I am working on VueJS below is my css

.button-css {
 align-items: center;
 background-color: var(--azure-radiance);
 border-radius: 30px;
 display: flex;
 height: 50px;
 min-width: 200px;
 padding: 0 60px;
}

.opensans-bold-white-18px {
 color: var(--white);
 font-family: var(--font-family-open_sans);
 font-size: var(--font-size-xxxl);
 font-style: normal;
 font-weight: 700;
 align-self: center;
}

and followed by Vue script

new Vue({
el: "#app",
data: {
   termsState: false,
   validated: false
  },
computed: {
  termsError() {
  return this.validated && !this.termsState
  }
},
methods: {
  handleTermsState() {
  this.validated = false
},

handleSubmit() {
  this.validated = true
 }
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>
<label for="terms">
        Terms and Privacy Policy
        <input type="checkbox" id="terms" name="terms" v-model="termsState"    @change="handleTermsState">
        {{ termsState }}
    </label>
      <div><button class="button-css opensans-bold-white-18px" type="submit" :disabled="!termsState" @click="handleSubmit">Submit</button></div>
</div>

The button retains the CSS only when it is enabled i.e 'oval shape button' when checkbox is ticked, when it is disabled it takes a gray rectangular shape button. I want to retain the shape of button as gray oval shape button disabled mode how to achieve it?

Below is the before and after images

I want both before and after images to be the oval shape

Ferry To · Accepted Answer · 2022-02-21 08:35:36Z

2

Actually it has nothing to do with Vue. All you have to do is to modify your CSS like this:

First remove the color property:

.opensans-bold-white-18px {
   /* color: var(--white); */
   font-family: var(--font-family-open_sans);
   font-size: var(--font-size-xxxl);
   font-style: normal;
   font-weight: 700;
   align-self: center;
  }

Second, change your button css class to bind a computed property like this:

<button :class="cssClass" type="submit" :disabled="!termsState" @click="handleSubmit">Submit</button>

And add your computed property:

  computed: {
    cssClass() {
      return "overlap-group-23 opensans-bold-white-18px button-css " + (this.termsState ? "button-enabled" : "");
    }
  }

Tested on both Safari and Chrome.

Is this what you want?

edited Feb 21, 2022 at 8:35

answered Feb 20, 2022 at 4:20

Ferry To

1,9805 gold badges45 silver badges56 bronze badges

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

3 Comments

Maverick Over a year ago

Yes, that's exactly I want, but toggle between gray and blue button when checked and unchecked.

Maverick Over a year ago

it did not work I am still having the same problem :(

Ferry To Over a year ago

@Maverick I just edited the answer so you should able to make it work now. :)

Collectives™ on Stack Overflow

Vue button toggling CSS using checkbox

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related