Vue&；Firebase类绑定

Vue和Firebase在这里都是新手。我正在原型化一个应用程序，它有一个按钮矩阵，我希望设备上的所有用户都能在数据库发生变化时通过对按钮应用css类来查看哪些按钮是“活动”的。我正在使用Vue绑定Firebase引用

一开始我尝试过这样的方法，但没有成功，我觉得这可能不是正确的方法

HTML

Firebase数据作为JSON

{
    "buttons": {
        "button1": false,
        "button2": false,
        "button3": false,
        "button4": false
    }   
}

---

我错过了什么？我觉得这应该是直截了当的功能

基于该数据库结构，

this.button

将如下所示：

[ { ".value": true, ".key": "button1" }, { ".value": false, ".key": "button2" }, { ".value": false, ".key": "button3" }, { ".value": true, ".key": "button4" } ] 

isBtnActive(btn){
  const button = this.buttons.find(b => b[".key"] === btn)
  if (button) return {active: button[".value"]}
  else return {active: false}
}

在这种情况下，您的

isBtnActive

方法应该如下所示：

[ { ".value": true, ".key": "button1" }, { ".value": false, ".key": "button2" }, { ".value": false, ".key": "button3" }, { ".value": true, ".key": "button4" } ] 

isBtnActive(btn){
  const button = this.buttons.find(b => b[".key"] === btn)
  if (button) return {active: button[".value"]}
  else return {active: false}
}

或者，您可以将

按钮

作为对象检索

firebase: {
  buttons: {
    source: buttonsRef,
    asObject: true,
  }
},

并将您的方法更改为

isBtnActive(btn){
  return { active: this.buttons[btn]}
}

或者完全省略该方法

<button :class="{active: buttons['button3']}">Button 3</button>

按钮3

按钮引用.child是有效的方法吗？还是

按钮nsref

只是一个数组？谢谢！它起作用了。我也很欣赏你的替代方法，非常好。

<button :class="{active: buttons['button3']}">Button 3</button>