Using Vue JS 2, firebase returned data object not defined on instance but referenced during render

0
votes

I'm working through the Vue tutorial at https://medium.com/codingthesmartway-com-blog/vue-js-2-firebase-e4b2479e35a8. I can post new data to firebase but I'm not getting any returned data.

I see this error in the console:

vue.esm.js?efeb:578

[Vue warn]: Property or method "books" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

The relevant blocks are below. Here's the template loop for displaying the retrieved data:

<tr v-for="(book, key) in books" v-bind:key="key">
    <td>
        {{book.title}}
    </td>
</tr>

In the script section:

  import Firebase from 'firebase'

  let config = {
    apiKey: "...",
    authDomain: "...",
    databaseURL: "https://...",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "..."
  };

  let app = Firebase.initializeApp(config)
  let db = app.database()
  let booksRef = db.ref('books/')

  /* was
  export default {
    name: 'app',
    firebase: {
      books: booksRef
    },
  */

  export default {
    name: 'app',
    firebase: function () {
        return {
            books: db.ref('books/')
        }
    },
    data() {
      return {
        newBook: {
          title: '',
          author: '',
        }
      }
    },
    methods: {
      addBook: function() {
        // code here
      },
      removeBook: function(book) {
        // code here
      }
    }
  }

Any advice would be appreciated!

2
firebasevuejs2

2 Answers

1
votes

Since Vue doesn’t allow dynamically adding root-level reactive properties, you have to initialize Vue instances by declaring all root-level reactive data properties upfront, even with an empty value:

data () {
  return {
    newBook: {
      title: '',
      author: '',
    },
    books: '',
  }
},
0
votes

from the vuefire docs:

If you need to access properties from the Vue instance, use the function syntax:

var vm = new Vue({
  el: '#demo',
  firebase: function () {
    return {
      anArray: db.ref('url/to/my/collection/')
    }
  }
})