Create vuefire firebase reference dynamisch

Question

Ich möchte eine Basisreferenz innerhalb einer Komponente erstellen, die eine Requisite enthält, die in das gleiche eingefügt wird. Es scheint jedoch, dass innerhalb der Firebase-Eigenschaft der Komponente "this" nicht wie in anderen an die VM gebunden ist. Interpretiere ich das richtig? Wenn ja, kann jemand an eine Arbeit denken? Wenn nicht, würde es sehr geschätzt werden, wenn ein Beispiel bereitgestellt werden könnte.

Hier ist ein einfaches Beispiel, was ich im Skript der Komponente zu tun versuche.

<script> 

import Firebase from 'firebase' 
import menuItem from 'menuItem.vue' 

export default { 
    ready() { 
     this.menuCatter = this.menuCat.categoryName 
    }, 
    data() { 
     return { 
      menuCatter: '' 
     } 
    }, 
    props: { 
     menuKey: { 
      type: String, 
      required: true 
     } 
    }, 
    firebase: { 
     menuCat: { 
      source: new Firebase('https://bluehill.firebaseio.com').child('menuCats/' + this.menuKey), 
      asObject: true 
     }, 
    }, 
    methods: { 
     updateCat(){ 
      let self = this 

       self.$firebaseRefs.menuCat.update({categoryName: self.menuCatter}) 
     }, 
    components: { 
     menuItem 
    } 
} 

</script> 

Answer 1

Sie haben Recht. Durch das Verschachteln des menuCat-Objekts innerhalb des Firebase-Schlüssels haben Sie den Kontext dafür verschoben. Sie können es neu zuweisen, aber das ist vielleicht nicht der beste Ansatz. Persönlich hätte ich eine Funktion in Ihrem Methoden-Hook, die das Firebase-Objekt zurückgibt, das Sie an jedem gewünschten Punkt speichern können. Auch im Hinblick auf die Verkettung von Strings schlagen wir vor, berechnete Eigenschaften zu verwenden - so ist Ihr Wert bereits an die this.menuKey-Eigenschaft gebunden und wird sich ändern, wenn sich die Menütaste ändert - derzeit wird dies nicht als Setup ausgeführt. In der Tat könnte man nur ganze Feuerbasis Objekt als eine berechnete Eigenschaft zurück, wenn Sie so wollen, zB:

computed: { 
    menuCat() { 
    return 'menuCats/' + this.menuKey 
    }, 
    fbRef() { 
    return { 
     source: new Firebase('https://bluehill.firebaseio.com').child(this.menuCat), 
     asObject: true 
    } 
    } 
}, 
methods: { 
    updateCat() { 
    this.$options.firebaseRef = fbRef() 
    } 
} 

ich nicht ganz gefolgt sind Ihre Logik völlig können, aber Sie werden den Kern erhalten.

Schließlich erwarten Sie this.manuCatter, wenn sich categoryName ändert? Wenn dies der Fall ist, müssen Sie den Code von Ihrer ready() - Funktion this.menuCatter = this.menuCat.categoryName migrieren und als berechnete Eigenschaft festlegen computed.manuCatter = function() { return ..... } Auf diese Weise ändert sich der Name der Kategorie.