vue.js bootstrap-vue 动态更改警报变体

Question

所以我在 vue.js 项目中使用 bootstrap-vue，这是您可以根据文档显示警报的方式：

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

我想做的是

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

//...

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

但这不起作用，警报显示没有样式。有什么办法可以在警报的变体属性中使用变量，以便我可以从代码中动态更改它？？

Answer 1

您需要像这样将alertvariant 属性绑定到variant 属性：

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

注意:variant 是v-bind:variant 的快捷方式

更多关于数据绑定的信息here

Answer 2

你可以这样做：

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