動態創建vuefire火力點引用

我想在包含傳遞給它的道具的組件內創建Firebase引用。然而，似乎在組件的firebase屬性中，'this'不像其他組件那樣綁定到VM。我解釋正確嗎？如果有的話，任何人都可以想到解決辦法？如果沒有，如果可以提供示例，將不勝感激。動態創建vuefire火力點引用

以下是我在組件腳本中嘗試執行的一個簡單示例。

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

來源

2016-04-30 Matthew Miller

你是對的。通過將menuCat對象嵌套在Firebase密鑰中，您已經移動了該內容。你可以重新分配它，但這可能不是最好的方法。就我個人而言，我會在你的方法鉤子中有一個函數返回firebase對象，你可以在任何你想要的地方隱藏它。此外，就連接字符串而言，建議使用計算屬性 - 這樣，您的值已綁定到this.menuKey屬性，並且它將隨菜單鍵更改而改變 - 當前爲設置，不會。事實上，你可以只返回整個火力對象作爲一個計算的屬性，如果你喜歡，如：

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() 
    } 
}

我可能不太遵循完全是你的邏輯，但你會得到的要點。

最後，你是否期待this.manuCatter在categoryName更改時更改？如果是這樣，您需要從ready（）函數this.menuCatter = this.menuCat.categoryName中遷移代碼，並將其作爲計算屬性computed.manuCatter = function() { return ..... }這樣它會隨着categoryName更改而變化。

來源

2016-05-03 03:53:27

謝謝我實際採取了一個稍微不同的路徑。我使用了firebase鉤子來建立我的基礎引用，然後我需要動態地使用它，我使用了類似這樣的東西。$ firebaseRefs.menuCat.child（whatever）etc ... –

動態創建vuefire火力點引用

回答

相關問題