Question

Javascript/Vue js/Firestore：innerHTML 为空，但第一次使用时成功

2020-09-21

240

javascript firebase vue.js

我正在从事自己的项目，我进行了查询，它获取了总用户数并将其存储在 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）或 jQuery 时那样直接操作 DOM，因为当您使用 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>