Laravel 拉威尔/韦克斯。如何根据传入的列值显示不同颜色的按钮？

我正在遍历用户表。每个用户表都有一个按钮，用于在用户表上切换（更新：布尔类型）用户状态。我希望当用户的状态值为0时，每个用户的按钮都是红色，当状态为1时，按钮都是绿色。此外，我希望该按钮在每次单击时根据状态值更改颜色（实时）

组件：切换状态.vue

导出默认值{
道具：['userId'，'onlinestat']，
安装的（）{
console.log（'组件已安装'）
},
数据：函数（）{
返回{
状态：this.onlinestat，
}
},
方法：{
goOnline（）{
axios.post（'/reservation/online/'+this.userId）
。然后（响应=>{
this.status=！this.status；
console.log（response.data）；
})
.catch（错误=>{
if（errors.response.status==401）{
window.location='/login'；
}
});
}
},
计算：{
按钮状态（）{
返回（此状态）-“btn btn大纲危险文本危险”：“btn btn成功”；
}
}
}

控制器：

$authUser=Auth:：user（）->业务id；
$employee=User:：where（'business_id'，$authUser）->get（）->sortBy（'name'）；
返回视图（'backend.reservation.index'，compact（'employee'）；

视图/刀片

@foreach（$key=>$emp的员工）
图像）}}“alt class=“ui-w-60圆形”>
{{$emp->name}
{{$emp->phone}
{{$emp->email}
ID:{{$emp->用户代码}
{{--  --}}
{{--  --}}
{{--  --}}
{{--  --}}
@endforeach

我得到的结果是，按钮确实会切换，但在刷新页面或加载页面后，所有用户的切换按钮都会变为红色。

试试看

buttonStatus() {
    return(this.status==0) ? 'btn btn-outline-danger text-danger' : 'btn btn-success ';
}

---

我尝试了您的建议，该按钮具有正确的颜色。当值为1时，它也会按预期进行切换。但是，当值为0时，当您单击该按钮时，它会在背景上将值从0更改为1，并且不会更改颜色，当您第二次单击时，它会将颜色更改为绿色，而此时该值将更改为0您必须使用正确的布尔值，设置为0，1您必须使用true和false。或者将

this.status=！this.status；

更改为

if（this.status==0）{this.status=1；}else{this.status=0；}

非常感谢。这就是我所需要的一切，效果非常好！