1

这里是 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
    }   
}

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

4

1 回答 1

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>
于 2017-07-05T20:39:43.407 回答