Question

Vue＆amp; amp; Firebase在这里。我正在为具有按钮矩阵的应用程序进行原型设计，我希望跨设备的所有用户能够看到哪些按钮是＆＃34;活跃的＆＃34;通过在数据库更改时将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);              
        }
    }
});

Firebase数据为JSON

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

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

Answer 1

根据该数据库结构，shareOnFacebook () { var tmp = this; ShareDialog.canShow(this.state.shareLinkContent).then( function(canShow) { if (canShow) { return ShareDialog.show(tmp.state.shareLinkContent); } } ).then( function(result) { if (result.isCancelled) { alert('Share cancelled'); } else { alert('Share success with postId: ' + result.postId); } }, function(error) { alert('Share fail with error: ' + error); } ); }将如下所示：

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]}
}

Vue＆amp; Firebase类绑定

1 个答案: