CODEWITHSUNDEEP
javascriptfirebasevue.jsvuefire
Edward Potter
Edward Potter

Reputation: 3820

The worlds simplest vue.js/vuefire/firebase app. But can't read value

Vue.js is a bit of a life style change for a sql programmer, but getting there. Here I use vuefire as per specs, even manually inserting the correct key from my one record, one field Firebase DB to test it out. Yet see nothing returned or displayed.

Love to know how to do that! And fill in my one value form. From there the sky's the limit I'm sure. Thanks for any help.

ERROR MESSAGE: vue.common.js?e881:481 [Vue warn]: Error in mounted hook: "ReferenceError: residentsArray is not defined"

 <template>

    <div class="edit">

    <div class="container">
      <p style="margin-bottom:10px;font-weight:800;">EDIT RECORD</p><br>

      <form id="form" v-on:submit.prevent="updateResident">

        <fieldset class="form-group">
          <label for="first_name">Name</label>
          <input type="text" class="form-control" id="first_name" name="first_name" v-model="currentResident.name">
        </fieldset>

        <input type="submit" class="btn btn-primary" value="Add New Resident">
      </form>

    </div>  

  </div>

</template>

    <script>

    import firebase from 'firebase'

    let editConfig = {
    apiKey: "123456789",
    authDomain: "myapp.firebaseapp.com",
    databaseURL: "https://myapp.firebaseio.com",
    projectId: "my",
    storageBucket: "myapp.appspot.com",
    messagingSenderId: "1234567890"
  };

  var firebaseApp = firebase.initializeApp(editConfig, "Edit")
  var db = firebaseApp.database()

  let residentsReference = db.ref('residents')

  export default {
    name: 'Edit',
    mounted() {
      this.currentResident.name = residentsArray.name;
    },
    firebase: {
      residentsArray: residentsReference.child('-KpzkbA6G4XvEHHMb9H0')
    },
    data () {
      return {
        currentResident: {
          name: ''
        }
      }
    },
    methods: {
      updateResident: function () {
        // Update record here
      }
    }
  }
</script>

Upvotes: 1

Views: 1021

Answers (2)

sandrooco
sandrooco

Reputation: 8716

You should change residentsArray.name to this.residentsArray.name in your mounted hook.

One more thing: You don't need mounted for this. I'd just make a computed for this which return this.residentsArray.name. With this, you won't have any binding problems.

Upvotes: 1

thanksd
thanksd

Reputation: 55634

From reading the README on the vuefire Github, it looks like you need to refer the properties of your firebase object via this.$firebaseRefs:

mounted() {
  this.currentResident.name = this.$firebaseRefs.residentsArray.name;
},

Upvotes: 1

Related Questions