Changing the utilities/values in a class of a bootstrap button-CodePudding

I have this code:

<b-button
id="search-button"
size="md"

type="submit"
@click="someEvent()"
>Example
</b-button

Let's say I call someEvent() and in the script I want to change the value of to

One workaround for this is to define a style in the b-button and do document.getElementById("search-button").style.width = "90px"; in the script, but that's not what I'm looking for.

The question is, how do I access the class utilities/values and change them directly from the script.

CodePudding user response：

I believe this is what you are looking for?

<b-button
  id="search-button"
  size="md"
  
  :submit"
  @click="hasClicked = !hasClicked"
>
Example
</b-button>

define variable hasClicked in either ref (composition API) or data block (options API).

For example

data(){ 
  hasClicked: false
}

basically you use class binding method (https://vuejs.org/guide/essentials/class-and-style.html) along with tenary operator (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)

CodePudding user response：

You can achieve that by dynamic class binding concept. Instead of hard coding the value of class attribute, we can bind that dynamically based on the condition.

In <b-button> element :

Use : instead of

In script :

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

someEvent() {
  // based on some condition we can update the dynamicStyles.
  this.dynamicStyles = 'mt-1 w-90'
}