vue.js bootstrap-vue dynamically change alert variant

Question

So I'm using bootstrap-vue in a vue.js project, and this is the way you can display an alert acording to the docs:

<b-alert variant="success" show>Success Alert</b-alert>

What I'm trying to do is

<b-alert variant=alertvariant show>Success Alert</b-alert>

//...

<script>
export default {
    name: 'SetPOS',
    data() {
        return {                       
            alertvariant: "warning"
        }
    },
...

But this is not working, the alert is showing up withouth style. Is there any way I can use variables in the variant property of the alert, so I can dynamically change it from code??

Answer 1

You need to bind the alertvariant prop to variant attribute like this:

<b-alert :variant="alertvariant" show>Success Alert</b-alert>

Note :variant is a shortcut for v-bind:variant

More info on data binding here

Answer 2

You can do it this way:

<b-button :variant="foo" @click="dataName = !dataName">Button Name</b-button>

//...

<script>
export default {
    name: 'componentName',
    data() {
        return {                       
            dataName: true //<--- define data
        }
    },
computed: {
    foo() {
      return this.dataName ? "success" : "warning"; //<--- define condition/s
    }
}
...