[Vuejs]-Javascript/Vue js/Firestore: innerHTML is null, but it worked in the first time

by

1👍

✅

Do not manipulate DOM directly as it’s normally done while using vanilla JS (plain javascript) or jQuery because when you are using vue.js it’snice to follow reactive pattern.

<template>
  <p> {{ users }} </p>
</template>

<script>
export default {
  data() {
    return {
      users: 0
    };
  },

  // you can use created or mounted, see which works
  created() {
    db.collection("Profile").get().then((res) => {
      this.users = res.size
    })
  }
};
</script>
👤Syed

3👍

As others have mentioned, Vue works best when you use data to drive your templates. Directly manipulating the DOM is an anti-pattern.

For example, use a data property for the information you want to display and assign it a value when your query completes

<p>{{ profileCount }}</p>

export default {
  data: () => ({ profileCount: null }),
  async created () {
    const { size } = await db.collection("Profile").get()
    this.profileCount = size
  }
}
👤Phil

Leave a comment