not able to render element into screen by v-for

I got data from a DB, stored it in an array, but could not render it with V-For, neither did I get any error or warning. I have following data on my db:

and here is my code:

<template>
  <div v-for="item in userList" :key="item.uid">
      <p>{{item.fullName}}</p>
  </div>
</template>
<script>
import { db } from "src/boot/firebase";
import { collection, query, where, getDocs } from "firebase/firestore";

export default {
  setup() {
    return {
      userList: []
    };
  },
  async created() {
    const q = query(
      collection(db, "userProfile"),
      where("verified", "==", true)
    );
    const querySnapshot = await getDocs(q);
    let arr = [];
    querySnapshot.forEach(doc => {
      // doc.data() is never undefined for query doc snapshots
      let docData = doc.data();
      this.userList.unshift(docData);
    });
    console.log(this.userList)
  }
};
</script>

Solution 1:

Oh, I think your problem is that you didn't make userList reactive (Vue Docs). Try this:

setup() {
  return {
    userList: ref([])
  };
},

and make sure you import ref:

import { ref } from 'vue';

When you use ref's you deal with the value they contain, rather than the ref directly, so anywhere you were using this.userList, you should now use this.userList.value (except in the template: templates know how to deal with refs).

Solution 2:

If You are using composition API put everything in setup function, there is no created hook here, so You can make function:

setup() {
  const userList = ref([]);
  const created = async () => {
    const q = query(
      collection(db, "userProfile"),
      where("verified", "==", true)
    );
    const querySnapshot = await getDocs(q);
    let arr = [];
    querySnapshot.forEach(doc => {
      let docData = doc.data();
      userList.value.unshift(docData);
    });
  };
  created();
  return {
    userList
  };
},