Modifying the attributes/properties within a class of a bootstrap button

Here is the code that I have:

<b-button
id="search-button"
size="md"
class="mt-1 w-100"
type="submit"
@click="someEvent()"
>Example
</b-button

If we imagine calling someEvent() and wanting to modify the value of class="mt-1 w-100" in the script to class="mt-1 w-90"

One approach could be defining a style within b-button and executing document.getElementById("search-button").style.width = "90px"; in the script, but that's not quite what I'm after.

The main question remains: How can I directly access and alter the class utilities/values from the script?

javascriptcssvue.jsbootstrap-4bootstrap-vue

Answer №1

Is this the solution you were searching for?

<b-button
  id="search-button"
  size="md"
  class="mt-1"
  :class="hasClicked ? 'w-90' : 'w-100'
  type="submit"
  @click="hasClicked = !hasClicked"
>
Example
</b-button>

To define the variable hasClicked, include it in either the ref (composition API) or data block (options API).

For instance:

data(){ 
  hasClicked: false
}

Essentially, utilize the class binding method (https://vuejs.org/guide/essentials/class-and-style.html) alongside the ternary operator (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)

Answer №2

To achieve dynamic class binding, you can use a concept that allows you to bind the class attribute based on conditions rather than hard coding it.

For the <b-button> element, follow these steps:

Replace class="mt-1 w-100" with :class="dynamicStyles"

In your script file:

data: {
  dynamicStyles: 'mt-1 w-100'
}

someEvent() {
  // Update dynamicStyles based on a condition.
  this.dynamicStyles = 'mt-1 w-90'
}

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

Unusual patterns observed when employing the splice method in AngularJS for ordering

Take a look at this Plunker demo link I have encountered an issue after implementing the orderby feature (line 24) in my application. When I try to add an item without priority and then add another one with priority, followed by deleting the first item, t ...

javascriptangularjs

Exploring the Relative Positioning of Two div Elements

Can anyone assist me with finding and comparing the positions of two '<div>' tags using an if statement? I stumbled upon a suggestion in my research, which goes like this: var obstacle = $('#obstacle').css('left', &apo ...

jquerycss

Troubleshooting EasyTabs: Localhost Issue with Ajax Tab Configurations

I've implemented EasyTabs for organizing my tabs on a webpage. I decided to use ajax-tabs functionality in order to fetch content from other pages when users click on the navigation menu buttons. However, I've encountered an issue where the conte ...

javascriptjquerycssajaxtabs

Is there a way to automatically override the CSS cursor style?

Issue with SCSS styling on image link I attempted to modify the cursor style from pointer to default, but after saving and reloading my React app, the change did not take effect. I tried writing some code, but it seems that Stack Overflow is indicating an ...

javascripthtmlcssreactjssass

Issue encountered while attempting to execute the command "vue-cli-service serve" using Vue 3

ISSUE ENCOUNTERED During an attempt to update packages, I executed ncu -u, followed by npm install to apply the updates. However, I encountered difficulties as it seemed to cause problems with eslint. Despite trying to reproduce the error for further inve ...

vue.jsnpmnpm-installpackage.jsonvuejs3

Positioning an HTML table with the use of a for loop in JavaScript

Detail of the project: -Utilizing a javascript for loop, my program extracts data from an external javascript array titled "arrays.js" and organizes it into an HTML table. The goal is to align the appropriate data under the "Date Name Address Amount" colum ...

javascript

Tips for managing nested data in Angular 4 using a Bootstrap 4 data-table

I am currently using the Data Table from a GitHub project found at: https://github.com/afermon/angular-4-data-table-bootstrap-4-demo. It works perfectly with data structured in a key-value format like the sample provided. However, I am facing challenges wh ...

angulardatatablebootstrap-4

Is it possible to animate the innerHTML of a div using CSS?

In my HTML file, I have these "cell" divs: <div data-spaces class="cell"></div> When clicked, the innerHTML of these divs changes dynamically from "" to "X". const gridSpaces = document.querySelectorAll("[data-spaces]"); f ...

javascripthtmlcss-animations

Type of Data for Material UI's Selection Component

In my code, I am utilizing Material UI's Select component, which functions as a drop-down menu. Here is an example of how I am using it: const [criteria, setCriteria] = useState(''); ... let ShowUsers = () => { console.log('Wor ...

javascriptreactjstypescriptreact-nativematerial-ui

Enhance your Wordpress posts with a custom pop-up form for each individual button

On a page, there are various custom posts being displayed with the post type 'property', each containing a button: <button class="btn btn-primary">Submit Offer</button> This button is looped and shown below every post. What ...

javascriptphpwordpress

After incorporating an additional element, the li:nth-child(odd) selector is no longer functioning correctly

I previously had a setup where items in a list would have alternate colors using jQuery: $('ul.follows li:nth-child(odd)').addClass('alternate'); Everything was functioning properly until I introduced an a tag before the list items. N ...

jquerycss

Custom component is experiencing issues with radio buttons not maintaining the checked state

Currently, I am facing an issue where checking either Male or Female results in both options getting checked. This problem didn't occur with the previous v-model approach. In addition, I would appreciate guidance on whether it is possible to include ...

vue.jsvuejs2vue-component

How to choose the option in one select box based on the selection in another, and vice versa

How can I dynamically select options in one select box based on the selection of another, and vice versa? I am using Ajax to redirect to a query page. while($result = mysql_fetch_assoc($query1)) { echo "<option value=".$result['username' ...

javascriptphpjqueryajax

Convert the value to JSON format by utilizing the PHP GET method

After retrieving a value using the GET method in my PHP file, I am attempting to access it. Below is how my PHP file appears: <?php include 'Con.php'; header('content-Type: application/json'); $catid = $_GET["CatId"]; //array ...

javascriptphpjsonchart.js

What are some alternative methods for organizing folder structure in Express Handlebars when managing views?

Is there a more efficient way to render HTML files without constantly needing them to have different names? I'm looking for a method where handlebars can identify which file in which folder to render, without encountering conflicts with files of the s ...

javascriptexpresshandlebars.jsexpress-handlebars

Is there a method to construct this? It appears quite challenging to create the intricate lines

I want to achieve this specific layout, but I am unsure how to align the lines next to the boxes. Should I use display or position properties to accomplish this? Image illustrating my desired outcome ...

htmlcssreactjs

Using jQuery to establish a canvas element and define its dimensions by adjusting its width and height attributes

My attempt at using jQuery to create a canvas element was not quite as expected. Here is the code I tried: var newCanvas = $('<canvas/>',{'width':100,'height':200,'class':'radHuh'}); $(body).append(n ...

javascriptjquerycanvashtml

I'm having trouble figuring out how to perfectly center this div on all types of devices

As someone who is new to css, I have been struggling to center these divs in the middle of the page across all devices despite searching extensively online and trying various solutions without any success. Check out my code below: Snippet: :after, :be ...

htmlcss

Pause a YouTube video automatically when the window is not in focus using FancyBox

I have successfully implemented dynamic play/pause functionality for a YouTube video, as demonstrated in my weave. However, I am facing challenges in making it work dynamically with FancyBox using the onBlur event (to pause the video when the window is no ...

javascriptjquerydynamicyoutubefancybox

Struggles with Aligning CSS Layout

I'm encountering some challenges with the layout of my webpage, particularly with alignment. Here are the issues I'm facing: The login section doesn't fit well in the header and lacks proper alignment. I aim to replicate the design from ...

htmlcss