Toggling CSS in Vue with a button and a checkbox

I'm currently working with VueJS and here is the CSS code I have:

.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;
}

After that, there's the 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>

Currently, the button retains the CSS only when it is enabled, i.e., an 'oval shape button' when the checkbox is ticked. When it is disabled, it takes a gray rectangular shape as a button. I want to maintain the oval shape even in disabled mode. How can I achieve this?

Here are the before and after images:

https://i.sstatic.net/4frwO.png

https://i.sstatic.net/nIRdc.png

I'd like both the before and after images to be in an oval shape.

Answer №1

Vue has nothing to do with this solution. Simply adjust your CSS in the following way:

Start by removing 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;
  }

Next, update your button's CSS class to bind a computed property like so:

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

Include the computed property within your code:

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

This solution has been tested on both Safari and Chrome.

https://i.sstatic.net/xIGC2.png

https://i.sstatic.net/tfOru.png

Does this meet your requirements?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to initiate a change when adding a new property to an object in VueJs?

Here is the initial structure of my vuex state in a VueJS project: state: { level1prop: null } After dynamically changing and mutating it, the structure becomes: state: { level1prop: { level2prop: { level3prop: { ...

Implement a horizontal scrollbar for your table in HTML

I need to implement a horizontal scroll bar for my table. Here is the HTML code: Even though I have utilized Bootstrap, the horizontal scroll bar is not working for this particular module. It works fine in other modules. The tbody data is added after an ...

Updating the background of a button with Vue JS by utilizing an object upon clicking

If you have three buttons and want to change the background color when clicked, for example, clicking on the red button should turn the background color red. However, there is an important detail here: if you click on one button and then another, the old c ...

Changing the Background Color of the Toolbar in Ionic

I am having trouble making the background color of my footer dynamic. I have tried binding the element to a class or applying dynamic styling, but it doesn't seem to work. Even when I have this in my HTML: <ion-footer align="center" style="height: ...

The dropdown menu in Bootstrap is malfunctioning despite the up and down arrow keys working properly

I've been attempting to create a basic dropdown menu using Bootstrap dropdown, and so far, it's been working perfectly in most instances. However, on certain pages, when I click on the three dots that are supposed to activate the dropdown, nothin ...

Issue: Headers cannot be modified once they have been sent

choose_option: function (remove) { var myself = this; myself.$http.post("/inventory/manager_id_list", {"id": remove,}).then(function(response){ var dataParent = response.body.result[0]; },function(failure){ ...

What is the best way to prioritize running an ajax process before initializing a slider on a Vue component?

Here is the structure of my Vue top league component: <template> <div class="row"> <div class="col-md-3" v-for="item in items"> <div class="panel panel-default"> <div class="panel-image"& ...

What is the best way to conceal a portion of a child element that exceeds the size of its parent container?

My <div> contains a <p>, but sometimes the text in the <p> exceeds the boundaries of the div. <div style="width: 100px'; height='100px';"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit ...

Guide on making a persistent sidebar using CSS and JavaScript

I'm in the process of developing a website that features a main content area and a sidebar, similar to what you see on Stack Overflow. The challenge I am facing is figuring out how to make the sidebar remain visible as a user scrolls down the page. T ...

Challenges concerning data handling and context management in Vue development

While developing my Vue application, I am experiencing some unexpected behavior that I need help with. Initially, I define my data in the view as shown below: ... data() { return { organization: { selectedOption: null, options: [], ...

What could be causing the lack of animation in W3schools icons?

I've followed the steps provided and even attempted to copy and paste them. However, I'm experiencing an issue where the animation doesn't fully execute. Instead of the bars turning into an X shape, they reset halfway through the animation. ...

Create a webpage layout using Bootstrap that features a left-aligned image within a div, with

Is there a way to achieve this layout using Bootstrap? View the desired design I am looking to create a div with an image on the left (float:left) and text (which could be one or multiple lines) along with a button aligned to the bottom right. The goal i ...

The animations in fontawesome 6.2 are completely ineffective

I've been struggling to make a spinner icon spin on my webpage. I made sure to download the latest version of font awesome and created a simple HTML file to troubleshoot the issue. Take a look at the HTML code below: <!doctype html> <html la ...

Maintain the structure of the slick slider during transitions

I am working with the slick slider and aiming to achieve a specific layout for the slider itself. What I require is a structure that looks like this: div div div div div I have managed to implement this design successfully, bu ...

"Exploring the versatility of Vue with multiple modals and

I am facing an issue with the following code. It generates buttons with different actions, and each button triggers a specific modal to display based on the modalTemplate property when clicked. The template content is then replaced through the slot. < ...

CSS: Preserve HTML elements and only conceal the text within an <a> tag

Inside an "a" element, there's an image followed by text as a link. I'm looking to only hide the text of the link without affecting the display of the image. <a href="https://www.example.com/page"> <img src=" ...

Display the hidden element using jQuery with the !important rule

There is a specific element that has been given a class with the following CSS styling: .cls { display:none !important; } Despite attempting to display this element using jQuery $(".cls").show(); This method does not seem to be effective. Is ...

Utilizing Inline Placement within Email Templates

Seeking assistance in finding an alternative method to achieve the desired functionality in an email template. Having trouble with inline position styling being removed. table { width: 80%; border-spacing: 0; } table tr td.label-dots { positio ...

When using jquery, the .css("border-color") method fails to provide a return value

I came up with the jquery javascript below $(document).mousemove(function(event) { var element = event.target; $(element).css("border","black solid 1px"); }); $(document).mouseout(function(event) { var element = event.target; console.log ...

Struggling to align an image in the center of a div on top of another image

I am attempting to center a logo on top of a moving image that scrolls through (unfortunately, the movement isn't visible on jsfiddle). I have tried using <center> tags, but they do not work. Adding margin: auto; does not properly center the ima ...