Как можно изменить цвет кнопки компонента Vue с помощью функции?

Question

Как можно изменить цвет кнопки компонента Vue с помощью функции? Bootstrap - vue используется. В приведенном ниже коде всплывающая подсказка изменяется с помощью функции. Как можно применить ту же идею к кнопке? Любая помощь будет принята с благодарностью.

Вот компонент Vue:

<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>

Answer 1

Использование синтаксиса объекта

Если вы хотите изменить цвет кнопки на основе checkbox1 prop, вы можете сделать это следующим образом:

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

Это установит цвет кнопки на outline-primary, если checkbox1 равно true, в противном случае установите outline-secondary цвет. Вы можете изменить цвет и логику c в зависимости от ваших требований.

Также обратите внимание, что здесь :variant - это просто сокращение для v-bind:variant.

Использование вычисляемого свойства

Мы также можем связать вычисляемое свойство, которое возвращает объект. Это общий и мощный шаблон:

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

, а затем создайте вычисляемое свойство с именем getVariant, например:

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