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 {&nbsp; data: () => ({ profileCount: null }),&nbsp; async created () {&nbsp; &nbsp; const { size } = await db.collection("Profile").get()&nbsp; &nbsp; this.profileCount = size&nbsp; }}

Answer 2

不要像通常在使用vanilla JS（纯 javascript）时那样直接操作 DOM，或者jQuery因为在使用时vue.js遵循反应模式很好。<template>&nbsp; <p> {{ users }} </p></template><script>export default {&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; users: 0&nbsp; &nbsp; };&nbsp; },&nbsp; // you can use created or mounted, see which works&nbsp; created() {&nbsp; &nbsp; db.collection("Profile").get().then((res) => {&nbsp; &nbsp; &nbsp; this.users = res.size&nbsp; &nbsp; })&nbsp; }};</script>