Javascript/Vue js/Firestore: innerHTML 为空，但它在第一次工作

Question

我正在处理自己的项目，我进行了查询，它获取了总用户数并将其存储在p标签中。

<v-card class="mt-10 mb-5 users" max-width="344">

    <v-card-text>

         <p class="display-1 text--primary text-center">Users</p>

         <div class="display-1 text--primary text-center">

             <p id="users"></p>

          </div>

     </v-card-text>

</v-card>

created() {

     // Get all user profile

     db.collection("Profile").get().then((res) => {

          document.getElementById('users').innerHTML = res.size

      })

}

但是现在我得到了我没有改变任何东西的错误。

错误

Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of null

Answer 1

正如其他人所提到的，当您使用数据来驱动模板时，Vue 的效果最好。直接操作 DOM 是一种反模式。

例如，为要显示的信息使用数据属性，并在查询完成时为其分配一个值

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

export default {

  data: () => ({ profileCount: null }),

  async created () {

    const { size } = await db.collection("Profile").get()

    this.profileCount = size

  }

}

Answer 2

不要像通常在使用vanilla JS（纯 javascript）时那样直接操作 DOM，或者jQuery因为在使用时vue.js遵循反应模式很好。

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