Javascript Vue和api背景更改

我试图改变一个取自Api的笑话的背景，问题是背景不会改变，我也不知道原因。 我遇到的问题是，我不知道如何更改数据中对象的属性。 当我从旗帜改为目录时，我可以改变背景。我哪里做错了。我误解了什么吗

vue.js

let jokeIng=new Vue({
el:“开玩笑”，
数据：函数（）{
返回{
随机笑话：“，
笑话家：“，
Own笑话：空，
选中：空，
颜色：“绿色”，
};
},
方法：{
getData:函数（）{
axios.get（“https://v2.jokeapi.dev/joke/Any）然后（（ret）=>{
控制台日志（ret）；
this.randomJoke=ret.data；
this.changeColor（ret.data.flags）；
});
},
changeColor:函数（值）{
开关（值）{
案例“nsfw”：
this.color='red'；
打破
“种族主义”一案：
this.color='blue'；
打破
“性别歧视”案例：
this.color='yellow'；
打破
“显式”案例：
this.color='橙色'；
}
},

html

{{randomJoke.data}
{{随机笑话.笑话}}

{{randomJoke.setup}}

{{randomChake.delivery}
```

API返回的JSON对象如下：

{
“错误”：错误，
“类别”：“编程”，
“类型”：“两部分”，
“设置”：“.NET开发者在食物方面很挑剔。”，
“送货”：“他们只喜欢鸡块。”，
“旗帜”：{
“nsfw”：错误，
“宗教”：假，
"政治":假,，
“种族主义者”：错误，
“性别歧视”：错误，
“明确”：错误
},
“id”：49，
“安全”：正确，
“郎”：“恩”
}

flags

是一个将类别映射到布尔值的对象，但是

changeColor（）

在

switch

语句中将

flags

与字符串进行错误比较

解决方法是分别检查每个标志：

导出默认值{
方法：{
更改颜色（标志）{
如果（flags.nsfw）{
this.color='red'
}否则，如果（旗帜、宗教）{
这个。颜色=“”
}else if（旗帜、政治）{
这个。颜色=“”
}else if（旗帜、种族主义者）{
this.color='blue'
}else if（旗帜、性别歧视）{
this.color='yellow'
}else if（flags.explicit）{
this.color='orange'
}否则{
这个。颜色=“”
}
}
}
}

非常感谢，我知道我在这方面出了什么问题。这对我来说是全新的，所以再次感谢你抽出时间来answear。谷歌对此没有太大帮助，所以这里问的是一个问候语：）