Vue 和 Firebase class 绑定

Question

这里是 Vue 和 Firebase 的新手。我正在制作一个应用程序原型，它有一个按钮矩阵，我希望跨设备的所有用户能够通过应用 css class 来查看哪些按钮是 "active"数据库更改时的按钮。我正在使用 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);              
        }
    }
});

Firebase 数据为 JSON

{
    "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>

Vue 和 Firebase class 绑定

Vue & Firebase class binding

firebase

vue.js

firebase-realtime-database

vuefire