0

I have problem in display the data which saved into an array of a firebase collection into a table in vueJS. when I use:

<tbody>
   <tr v-for="{ id, symb } in getSymbols" :key="id">
      <td>{{ symb }}</td>
   </tr>
</tbody>

in the UI it shows me a blank table, but when I get a console log, the data is showing in console. Here is my firebase funcion

export const LoadSymbols = () => {

  const symbols = ref([])
  db.collection('alarms').onSnapshot(snapshot => {
    symbols.value = snapshot.docs.map(doc => (doc.id))
    console.log(symbols.value);
  })
  // onUnmounted(alarmDoc)
  return symbols;
}

and here is my script section of vuejs file:

<script>
import {LoadSymbols} from "../firebase";

export default {
  setup() {
    const getSymbols = LoadSymbols()

      return {getSymbols};
  },
};
</script>

this is my UI which show nothing in td.

enter image description here

Tariq Tabesh
  • 1
  • 2
  • Have you checked [How to return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) Also do you need realtime updates or want to fetch data only once? – Dharmaraj Apr 19 '22 at 11:12
  • I want real time update, when a document inserted in my firebase collection, I want it to automatically show on that table. – Tariq Tabesh Apr 19 '22 at 11:19

0 Answers0