0

我正在尝试在 Vue 中设置一个计算变量，以<b-badge>根据从 JSON 文件返回的数据设置引导标记标签的变体。

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

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

在计算的 var 内部，当权限属性设置为“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>

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

如何配置variant接收计算的 var？或者是否有另一种方法可以根据从 JSON 返回的数据来处理徽章的动态着色？

4

1 回答 1

2

与Vue 中的任何其他绑定属性一样，语法如下：

<b-badge pill :variant="dynamicColor">{{ data.permission }}</b-badge>
于 2022-02-20T03:12:28.577 回答