如何在 Vue 中设置计算变量来更改 vue-bootstrap 徽章变体颜色

Question

我正在尝试在 Vue 中设置一个计算变量来根据从 JSON 文件返回的数据设置 bootstrap 徽章标签 <b-badge> 的变体。

我将从 JSON 文件返回的响应设置为传递给名为 configData 的数组。然后我在我的 Vue 组件中设置计算变量，如下所示：

computed: {
   dynamicColor() {
      return this.configData.permission === "Env" ? "primary" : "success"
   }
}

在计算变量中，当权限属性设置为“Env”时，b-badge 标签中的变体属性...

<b-list-group v-for="data in configData" :key="data.id">
    <b-list-group-item>
        <div>
            <h5><b-badge pill variant="\(dynamicColor)">{{ data.permission }}</b-badge></h5>
        </div>
    </b-list-group-item>
</b-list-group>

...将设置为“主要”。否则，如果权限属性在 JSON 中设置为另一个值，则变体将设置为“成功”。

这是完整的组件：

<template>
    <div id="config">
        <h3><b-icon icon="wrench"></b-icon> CONFIG</h3>
        <b-list-group v-for="data in configData" :key="data.id">
            <b-list-group-item>
                <div>
                    <h5><b-badge pill variant="\(dynamicColor)">{{ data.permission }}</b-badge></h5>
                </div>
            </b-list-group-item>
        </b-list-group>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    name: 'Config',
    data() {
        return {
            configData: []
        }
    },
    created() {
        this.getConfigData()
    },
    computed: {
        dynamicColor() {
            return this.configData.permission === "Env" ? "primary" : "success"
        }
    },
    methods: {
        getConfigData() {
            axios
            .get('data_config.json')
            .then(response => (this.configData = response.data))
        }
    }
}
</script>

我不确定如何在 b-badge 标记中配置 variant 以接收计算的变量。我尝试将“\(dynamicColor)”添加到 variant，但这没有用。

如何配置 variant 以接收计算的变量？或者是否有另一种方法可以根据 JSON?

返回的数据处理徽章的动态着色

Answer 1

与Vue中的any other bound attribute一样，语法如下：

<b-badge pill :variant="dynamicColor">{{ data.permission }}</b-badge>

如何在 Vue 中设置计算变量来更改 vue-bootstrap 徽章变体颜色

How to set up a computed var in Vue to change the vue-bootstrap badge variant color

computed-values

vue.js

vuejs2