Самое простое в мире приложение vue.js/vuefire/firebase. Но не могу прочитать значение

Vue.js немного изменил стиль жизни программиста sql, но все же получается. Здесь я использую vuefire в соответствии со спецификациями, даже вручную вставляя правильный ключ из моей одной записи, одно поле Firebase DB, чтобы проверить это. Пока не вижу ничего возвращенного или отображенного.

Люблю знать, как это сделать! И заполните мою форму с одним значением. Оттуда небо - предел, я уверен. Спасибо за любую помощь.

СООБЩЕНИЕ ОБ ОШИБКЕ: vue.common.js? E881:481 [Vue warn]: Ошибка в смонтированном хуке: "ReferenceError:резидентный массив не определен"

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

2 ответа

Решение

Вы должны изменить residentsArray.name в this.residentsArray.name в вашем mounted крюк.

Еще одна вещь: вам не нужно mounted за это. Я бы просто сделал computed для этого, которые возвращаются this.residentsArray.name, С этим у вас не будет никаких проблем с привязкой.

Из чтения README на vuefire Github, похоже, вам нужно сослаться на свойства вашего firebase объект через this.$firebaseRefs:

mounted() {
  this.currentResident.name = this.$firebaseRefs.residentsArray.name;
},
Другие вопросы по тегам