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

Executing Node.js child processes: streaming stdout to console as it happens and running the processes one after the other

Details node: v9.4.0 I am looking for a solution to execute external commands sequentially while monitoring the stdout in real-time. The code snippet below demonstrates my attempt to retrieve all test cases from ./test/ and then running them one after ...

javascriptnode.jschild-process

How can I convert base64 data to a specific file type using React Cropper JS?

I have successfully implemented the crop functionality using react cropper js. Now, I am faced with a challenge of sending the cropped image as a file type. Currently, I can obtain the base64 string for the cropped image. However, when I submit the cropped ...

javascriptjqueryhtmlreactjsnpm

A for loop is executed after a console.log statement, even though it appears earlier in the code

When this specific block of code is implemented var holder = []; const compile = () =>{ let latitude = 0; let longitude = 0; for (let i = 0; i < holder.length; i++) { Geocode.fromAddress(holder[i].city).then( (response ...

javascriptreactjsgeocode

You will still find the information added with JQuery append() even after performing a hard refresh

After making an Ajax call using JQuery and appending the returned information to a div with div.append(), I encountered a strange issue. Despite trying multiple hard refreshes in various browsers, the appended information from the previous call remained vi ...

javascriptjquery

Displaying information in a drop-down list based on the selection made in a previous drop

Hey fellow developers, I could really use your expertise on a project I'm working on for attendance management. I've hit a roadblock with a specific feature - my goal is to dynamically display departments based on the selected block without requi ...

phpjquerycssajaxhtml

Are you struggling to get basic HTML and JS code to function properly?

I'm currently working on developing a racing game, and my initial step was to create the car and implement movement functionality. However, I've encountered an issue where nothing is displaying on the canvas - neither the rectangle nor the car it ...

javascriptjqueryhtmlcanvas

svg viewbox cannot be adjusted in size

Struggling with resizing an SVG to 20px by 20px. The original code size of the SVG is quite large at 0 0 35.41 35.61: <!doctype html> <html> <head> <meta charset="utf-8"> <title>SVG</title> ...

htmlcsssvg

`Some Items Missing from Responsive Navigation Menu`

Hey there! I'm currently diving into the world of responsive design and I'm attempting to create a navigation bar that transforms into a menu when viewed on a mobile device or phone. Everything seems to be working fine, except that not all the na ...

javascripthtmlcssresponsive-design

Tips for obtaining the retrieved URL from an ajax call

How can I extract only the returned URL from an ajax request? I have tried implementing it like this: $.ajax({ type: "GET", dataType : "jsonp", async: false, url: $('#F ...

javascriptphpjqueryajax

Stop jQuery from submitting the form in case of validation errors

Hey there, I'm currently working on preventing the AJAX form submission function from happening if one of the inputs fails validation. Edit: Specifically, I'm looking for guidance on what changes need to be made in //Adult age validation and var ...

javascriptjqueryajaxforms

Managing several instances of NgbPagination on a single webpage

I am facing a challenge with having multiple NgbPagination components on a single page. For more information, please visit: Initially, I attempted to use ids but encountered an issue where changing one value in the first pagination affected both tables. ...

htmlcssangularpaginationng-bootstrap

Selecting a "non-operational" collection location on an e-commerce platform

Recently I discovered a bug on an online shopping website. It seems that by using inspect element, it was possible to alter the HTML code and change an unavailable pickup point to available. This allowed me to place an order, make a payment, and even recei ...

javascripthtmlgoogle-chrome-devtoolsonline-store

Display a fresh <p> tag when the condition in the if-statement is met

If you are looking for a questionnaire, check out this one. Now, I am interested in creating if-statements using HTML/CSS/jQuery to achieve the following scenario: Initially, only Question 1 will be visible. When the input matches a certain value like X, ...

jqueryhtmlcssif-statement

Display a pleasant alert message when the file is not recognized as an image during the loading

Is there someone who can assist me? I have attempted multiple times but without success. How can I display a sweet alert when a file is selected that is not an image? <input type ="file" /> ...

javascripthtml

Executing the callback function

I am facing a situation where I have a Modelmenu nested within the parent component. It is responsible for opening a modal window upon click. Additionally, there is a child component in the same parent component that also needs to trigger the opening of a ...

javascriptreactjsnext.jscallback

An error was thrown: SyntaxError - { was not expected in script.js on line 5 while checking request

I encountered an issue while executing the code snippet below: var req = new XMLHttpRequest(); req.open('GET', 'data.json'); req.onreadystatechange = function() { if ((req.readyState === 4) && (req.status == 200)) { var cus ...

javascriptajaxjson

Turning a Static Website Dynamic with Faceapp.js

After installing node_modules and adding faceapp.js as a dependency, I attempted to use it but unfortunately encountered some issues. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

javascriptjqueryimagenpm

Facing an error response with the Javascript callout policy in Apigee. Any suggestions on fixing this issue?

This is the code snippet I'm using in my JavaScript callout policy var payload = JSON.parse(request.content); var headers = {'Content-Type' : 'application/json'}; var url = 'https://jsonplaceholder.typicode.com/posts'; va ...

javascriptapigee

Choose the parent element along with its sibling elements

How can I target not only an element's siblings but also its parent itself? The .parent().siblings() method does not include the original element's parent in the selection. $(this).parent().addClass("active").siblings().removeClass("active"); I ...

javascriptjqueryparent

Unable to delete a row from a dynamically generated table using jQuery

I am currently working on a project that involves creating a table based on results from a servlet. The table includes checkboxes, and when a checkbox is checked, a button at the bottom of the table should appear. This button calls a remove function to del ...

javascriptjquerycheckbox