[Vuejs]-Populate Vuejs input field with Firebase when Variables are out of scope

by

0👍

✅

Try the following, which incorporates the changes from my comment. To clarify, using a computed property to execute the query would be ideal, as it will execute at a certain point in the lifecycle.

You can also use a method but you would have to call it at some point – you mention on page reload, then one of the component lifecycle hooks would be ideal.

The below is a computed property approach. The property is bound to a v-model so Vue might also force you to define a setter also but that’s straightforward.

export default {
  name: 'app',
  data() {
    return {
      name: '',
    }
  },
  computed: {
    fullName() {
      var query = dbRef.orderByKey();
      query.once('value')
        .then((snapshot) => {
          snapshot.forEach((childSnapshot) => {
            this.name = childSnapshot.child('name').val();
          });
        });
    }
  }
}


<template lang="html">
  <div class="">
    <label for="">Name</label>
    <input id="nameId" type="text" v-model="fullName" />
  </div>
</template>

Leave a comment