Vue and api background changing

I am trying to change a background of a joke that is taken from an Api, The problem is that the background won’t change and i can’t figure out the reason. Where i am having problems is that i cant figure out how to change the properties of an object inside the data. I was able to change the background when i changed from flags to catergory. Where am i going wrong. Did i misunderstand somthing?

the vue.js

    let jokeIng = new Vue({
    el: "#JokeApp",
    data: function () {
        return {
            randomJoke: "",
            jokeLists: "",
            ownJoke: null,
            selected: null,
            color: 'green',

        };
    },
    methods: {
        getData: function () {
            axios.get("https://v2.jokeapi.dev/joke/Any").then((ret) => {
                console.log(ret);
                this.randomJoke = ret.data;
                this.changeColor(ret.data.flags);
            });
        },
        changeColor: function (value) {
            switch (value) {
                case 'nsfw':
                    this.color = 'red';
                    break;
                case 'racist':
                    this.color = 'blue';
                    break;
                case 'sexist':
                    this.color = 'yellow';
                    break;
                case 'explicit':
                    this.color = 'orange';
            
            }
        },

the html

<div id="Color" :style="{'background-color':color}">
                        <div class="jokeTxt">{{randomJoke.data}}</div>

                        <div class="rjoke">
                            {{randomJoke.joke}} <br />
                            {{randomJoke.setup}} <br />
                            {{randomJoke.delivery}}
                        </div>
                        </div>
                    </div>```

Answer

That API returns JSON objects like this:

{
    "error": false,
    "category": "Programming",
    "type": "twopart",
    "setup": ".NET developers are picky when it comes to food.",
    "delivery": "They only like chicken NuGet.",
    "flags": {
        "nsfw": false,
        "religious": false,
        "political": false,
        "racist": false,
        "sexist": false,
        "explicit": false
    },
    "id": 49,
    "safe": true,
    "lang": "en"
}

flags is an object that maps the categories to Booleans, but changeColor() is incorrectly comparing flags to strings in the switch statement.

The fix is to check for each flag individually:

export default {
  methods: {
    changeColor(flags) {
      if (flags.nsfw) {
        this.color = 'red'
      } else if (flags.religious) {
        this.color = ''
      } else if (flags.political) {
        this.color = ''
      } else if (flags.racist) {
        this.color = 'blue'
      } else if (flags.sexist) {
        this.color = 'yellow'
      } else if (flags.explicit) {
        this.color = 'orange'
      } else {
        this.color = ''
      }
    }
  }
}