CODEWITHSUNDEEP
javascriptvue.jsbutton
65535
65535

Reputation: 553

How can a Vue component button color be changed using a function?

How can a Vue component button color be changed using a function? Bootstrap-vue is being used. In the code below, the tooltip is changed using a function, how can the same idea be applied to the button? Any help would be greatly appreciated.

Here is the Vue component:

<template>
  <div class="text-center">
    <b-button v-b-tooltip.hover.right="tooltipText" variant="outline-primary" @click="userHandler(username)">
      <div v-bind:class="{ active: checkbox1 }">
        {{ username }}
      </div>
    </b-button>  
  </div>
</template>

<script>

import EventBus from '../eventBus.js'
export default {

    props: ['username', 'checkbox1'],

    data() {
      return {
         show: true,
         tooltipTextContent: 'block',
     }      
},

methods: {


    userHandler(username) {

        EventBus.$emit('handleUser', username);  
    },


     tooltipText() {
          if (!this.checkbox1) {
            return this.tooltipTextContent
          } else {
            return `un${this.tooltipTextContent}`
          }
    }
},
} 

</script>
<style scoped>

.active {
    color: red;
}
</style>

Upvotes: 0

Views: 713

Answers (1)

palaѕн
palaѕн

Reputation: 73906

Using Object Syntax

If you want to change the colour of the button based on checkbox1 prop, you can do this like:

<b-button 
   v-b-tooltip.hover.right="tooltipText" 
   :variant="{ 'outline-primary': checkbox1, 'outline-secondary': !checkbox1 }" 
   @click="userHandler(username)">

This will set button colour to outline-primary if checkbox1 is true, else set it to outline-secondary colour. You can change the colour and logic based on your requirement.

Also, note that here :variant is simply a shortcut for v-bind:variant.

Using Computed Property

We can also bind to a computed property that returns an object. This is a common and powerful pattern:

<b-button 
   v-b-tooltip.hover.right="tooltipText" 
   :variant="getVariant" 
   @click="userHandler(username)">

and then create a computed property named getVariant like:

computed: {
  getVariant: function () {
    return {
      'outline-primary': this.checkbox1,
      'outline-secondary': !this.checkbox1
    }
  }
}

Upvotes: 1

Related Questions