0

I am attempting to set up a computed var in Vue to set the variant of a bootstrap badge tag <b-badge> depending on data being returned from a JSON file.

I set up the response returned from the JSON file to be passed to an array called configData. I then set up the computed var in my Vue component to look like this:

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

Inside the computed var, when the permission property is set to "Env", then the variant property in b-badge tag...

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

...will be set to "primary". Otherwise, if the permission property is set to another value in the JSON, then variant will be set to "success".

Here is the full component:

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

I'm not sure how to configure variant in the b-badge tag to receive the computed var. I tried adding "\(dynamicColor)" to variant, but this did not work.

How can I configure variant to receive the computed var? Or is there another way to handle dynamic coloring for the badge based on data returned from JSON?

the Tin Man
  • 158,662
  • 42
  • 215
  • 303
JS_is_awesome18
  • 1,587
  • 7
  • 23
  • 67
  • is configData an array with multiple permission's? i.e `[{permission: 'Env'}, {permission: 'foo'}]`? if so then this.configData.permission wont work you should use a filter `:variant="data.permission | dynamicColor"` or a method `:variant="dynamicColor(data.permission)"`, is unclear as your looping over configData, – Lawrence Cherone Feb 20 '22 at 03:22
  • yes, configData is an array, with permission sometimes being 'Env' and other times it being 'foo': ```[{permission: 'Env'}, {permission: 'foo'}]```. The computed var in my above code is not working. Is there another way to handle changing the variant color based on the permission? – JS_is_awesome18 Feb 20 '22 at 03:48
  • sure, use a [method](https://v1.vuejs.org/guide/events.html) or [filter](https://v2.vuejs.org/v2/guide/filters.html) changing dynamicColor's logic to `dynamicColor(v) {return v === 'Env' ? 'primary':'success'}` or put it inline `:variant="data.permission === 'Env' ? 'primary':'success'"` if you only need it in that one place – Lawrence Cherone Feb 20 '22 at 03:50
  • I set it up as a method: ```dynamicColor(v) {return v === 'Env' ? 'primary':'success'}```, then changed added "dynamicColor()" to the variant: ```:variant="dynamicColor(data.permission)"```. When permission is "Env" then the variant is "primary". When permission is "Foo" then variant is "success". This worked. Thanks so much! – JS_is_awesome18 Feb 20 '22 at 04:06

1 Answers1

2

As with any other bound attribute in Vue, the syntax is the following:

<b-badge pill :variant="dynamicColor">{{ data.permission }}</b-badge>
Caleb Weeks
  • 182
  • 1
  • 1
  • 12