已解決430363個問題，去搜搜看，總會有你想問的

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

首頁猿問 Javascript/Vue...

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

JavaScript

慕神8447489 2023-03-18 17:03:52

我正在處理自己的項目，我進行了查詢，它獲取了總用戶數并將其存儲在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

查看完整描述

2 回答

開心每一天1111

TA貢獻1836條經驗獲得超13個贊

正如其他人所提到的，當您使用數據來驅動模板時，Vue 的效果最好。直接操作 DOM 是一種反模式。

例如，為要顯示的信息使用數據屬性，并在查詢完成時為其分配一個值

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

export default {

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

async created () {

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

this.profileCount = size

}

反對回復 2023-03-18

MM們

TA貢獻1886條經驗獲得超2個贊

不要像通常在使用vanilla JS（純 javascript）時那樣直接操作 DOM，或者jQuery因為在使用時vue.js遵循反應模式很好。

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

</template>

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>

反對回復 2023-03-18

2 回答
0 關注
138 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

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

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

2 回答

添加回答

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

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