VueJs + Firestore实时侦听器并更新更改

Question

我正在使用vuejs和firestore。我正在尝试更改我的数据而无需刷新页面。当我更改Firestore的值时，下面的代码为我添加了新行。

更改前的值：

更改后的值：

我的代码：

{
<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>

}

Answer 1

在您的created函数中，执行以下操作：

 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);
        });
      });
  }