CODEWITHSUNDEEP
vue.jsgoogle-cloud-firestore
meth
meth

Reputation: 99

VueJs + Firestore realtime listeners and update changes

I'am working with vuejs and firestore.I'am trynig to make my data change without refreshing page. the code below add me new line when i change the value on firestore.

value before changing:

value before changing

value after changing:

value after changing

my code:

my code

{
<template>

  <div id="dashboard">
    <ul class="collection with-header">
      <li class="collection-header"><h4>PLC</h4></li>
      <li v-for="post in plc_value" v-bind:key="" class="collection-item">
        <div class="chip">{{post.value_g}}</div>
        <router-link class="secondary-content" v-bind:to="{ name: '', params:{} }"><i class="fa fa-eye"></i></router-link>
      </li>
    </ul>
  </div>
  </div>
</template>

<script>
import db from './firebaseInit';
export default {
  name: 'dashboard',
  data() {
    return {
      plc_value: [],
  //    loading: true
    };
  },
  created() {
    db
      .collection('plc_value')
      .onSnapshot(snap => {
        snap.forEach(doc => {
          const data = {
            id: doc.id,
            value_g: doc.data().value_g
          };
          this.plc_value.push(data);
        });
      });
  }


};
</script>

}

Upvotes: 0

Views: 819

Answers (1)

Peoray
Peoray

Reputation: 1925

In your created function, do this:

 created() {
    db
      .collection('plc_value')
      .onSnapshot(snapshot => {
        const documents = snapshot.docs.map(doc => {
          const data = {
            id: doc.id,
            value_g: doc.data()
          }
            return data
        });
          this.plc_value.push(documents);
        });
      });
  }

Upvotes: 2

Related Questions