Vue＆Firebase類別綁定

這兩個新功能都適用於Firebase。我正在構建一個應用程序，該應用程序具有一組按鈕，我希望跨設備的所有用戶能夠在數據庫發生更改時通過將css類應用於按鈕來查看哪些按鈕處於「活動」狀態。我使用VueFire將Firebase參考與Vue綁定。Vue＆Firebase類別綁定

起初我嘗試過類似的東西，但它不起作用，我覺得這可能不是正確的方法。

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

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

我缺少什麼？我似乎應該是直截了當的功能。

來源

2017-07-05 ctown4life

是'buttonsRef.child'一個有效的方法嗎？或者'buttonsRef'只是一個數組？ – thanksd

基於該數據庫結構，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-05 20:39:43 Bert

謝謝！有用。我很欣賞你的另一種方法，非常好。 – ctown4life

Vue＆Firebase類別綁定

回答

相關問題