Vue & Firebase 类绑定

Question

这里是 Vue 和 Firebase 的新手。我正在制作一个应用程序原型，该应用程序具有一个按钮矩阵，我希望跨设备的所有用户能够通过在数据库更改时将 css 类应用于按钮来查看哪些按钮是“活动的”。我正在使用 VueFire 将 Firebase 引用与 Vue 绑定。

起初我尝试了类似的方法，但没有成功，而且我觉得这可能不是正确的方法。

HTML

<button v-bind:class='{ "active": buttons['button1'] }'>                
<button v-bind:class='{ "active": buttons['button2'] }'>                
<button v-bind:class='{ "active": buttons['button3'] }'>
<button v-bind:class='{ "active": buttons['button4'] }'>        

然后，我想我可以使用一种方法来根据按钮的名称确定按钮是否处于活动状态，但它也不起作用。

HTML

<button v-bind:class='{ "active": isBtnActive("button1") }'>                
<button v-bind:class='{ "active": isBtnActive("button2") }'>                
<button v-bind:class='{ "active": isBtnActive("button3") }'>
<button v-bind:class='{ "active": isBtnActive("button4") }'>        

Javascript

var buttonsRef = firebase.database().ref('buttons');

var app = new Vue({ 
    el: '#app',
    data: {
    },
    firebase: {
        buttons: buttonsRef
    },  
    methods: {      
        isBtnActive: function(name) {           
            return buttonsRef.child(name);              
        }
    }
});

JSON 格式的 Firebase 数据

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

我错过了什么？我似乎这应该是直截了当的功能。

Answer 1

基于该数据库结构，this.buttons 将如下所示：

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

既然如此，您的isBtnActive 方法应该如下所示：

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

您也可以将buttons 作为对象检索。

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

把你的方法改成

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

或者完全省略该方法。

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