Javascript 节点红色：uibuilder节点：更新html元素（Vue.js）

我正在使用节点红色中的节点创建一个楼层平面，其中灯泡的灯光应根据输入（灰色、红色或绿色）更改颜色

在这个例子中，颜色被更改为true或false，效果很好，但是由于我需要三种不同的颜色，我必须得到另一种解决方案，或者可以使用“undefined”作为第三个选项吗

我不知道如何或在哪里构建switch语句。 有人能把我引向正确的方向吗

我的代码片段：

html文件：

{{title}}

js文件：

模板：“#灯泡模板”，
道具：{
颜色：{
类型：字符串，
必填项：false，
默认值：“灰色”，
},
...
伊森：{
类型：布尔型，
必填项：false，
默认值：false，
},
...
var app1=新的Vue({
el:“#应用程序”，
数据：{
isonb:false，
伊索纳：错，
isonc:false，
isond：错，
},
//开始
挂载：函数（）{
/****必需**使用节点红色启动uibuilder通信*/
uibuilder.start（）
//当从节点RED接收到标准消息时，消息被更新
uibuilder.onChange（'msg'，函数（msg）{
if（msg.payload.hasOwnProperty（'A'））{
app1.isona=msg.payload.A
}
if（msg.payload.hasOwnProperty（'B'））{
app1.isonb=msg.payload.B
}
if（msg.payload.hasOwnProperty（'C'））{
app1.isonc=msg.payload.C
}
if（msg.payload.hasOwnProperty（'D'））{
app1.isond=msg.payload.D
}
})
}//-已安装吊钩的末端--//
})//-附件1的末尾--//

如果您可以将颜色直接解析到“灯泡”组件中，那么由于vue的反应性，应该可以将其输入：color=…更改为一个在js中发生变化的变量。您可以共享灯泡组件的html吗？@nonNumericalFloat-thx供您回复。我添加了您要求的html。如果您可以解析颜色d直接进入你的“灯泡”组件，那么，由于vue的反应性，应该可以将它的输入：color=…更改为一个变量，该变量在js中会发生变化。你能共享灯泡组件的html吗？@nonNumericalFloat thx供你回复。我添加了你要求的html。