javascript - 我的 Vue Js 应用程序会在每个文档更改时刷新

Question

我正在使用 Vue Js 和 Firebase 构建一个投票网络应用程序，该应用程序包含单元，每个单元都有一个“upvote”和“downvote”按钮。我的问题是，每当单击按钮时，整个单位列表都会刷新，而不是仅按应有的方式更改投票计数。我的 Vue js 代码是否遗漏了什么？

html代码：

<div id="unitWrapper">
      <div v-for="request in requests" id="unit" >
          <iframe :src="request.text" id="spotifyEmbed" width="80" height="80" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
          <h2 id="title">{{ request.songN }}</h2>
          <div id="votes">
              <span  id="up" @click="upV(request.id)">
                <i class="fas fa-arrow-up fa-2x" v-if="request.isUpvoted" style="color: rgb(1, 187, 1);"></i>
                <i class="fas fa-arrow-up fa-2x" v-else style="color: #888;"></i>
                <p class="votesNumber" style="color: rgb(1, 187, 1);">{{ request.upVotes }}</p>
              </span>
              <span id="down"  @click="downV(request.id)">
                <i class="fas fa-arrow-down fa-2x" v-if="request.isDownvoted" style="color: red;"></i>
                  <i class="fas fa-arrow-down fa-2x" v-else style="color: #888;"></i>
                  <p class="votesNumber" style="color: red;">{{ request.downVotes }}</p>
              </span>
          </div>
      </div>
    </div>

js/vue 代码：

var app = new Vue({
  el: "#unitWrapper",
  data: {
    requests: [],
  },
  methods: {
    upV(id) {
      const upvote = firebase.functions().httpsCallable("upvote");
      upvote({ id: id }).catch((err) => {
        showNotification();
      });
    },
    downV(id) {
      const downvote = firebase.functions().httpsCallable("downvote");
      downvote({ id: id }).catch((err) => {
        showNotification();
      });
    },
  },
  created() {
    const ref = firebase
      .firestore()
      .collection("requests")
      .orderBy("upVotes", "desc");
    ref.onSnapshot((snapshot) => {
      let requests = [];
      snapshot.forEach((doc) => {
        var obj = {};
        obj = {
          ...doc.data(),
          id: doc.id,
        };
        var user = firebase.auth().currentUser;
        if (user != null) {
          firebase
            .firestore()
            .collection("users")
            .doc(user.uid)
            .get()
            .then((val) => {
              if (val.exists) {
                  var res = val.data().upVotedOn.includes(doc.id)
                  var res2 = val.data().downVotedOn.includes(doc.id)
                  console.log(`${res2} - downvoted`);
                  obj.isUpvoted = res;
                  obj.isDownvoted = res2;
              } else {
                obj.isUpvoted = false;
                obj.isDownvoted = false;
              }
              requests.push(obj);
            })
            .catch((err) => console.log(err));
        } else {
          obj.isUpvoted = false;
          obj.isDownvoted = false;
          requests.push(obj);
        }
      });

      // console.log(requests);
      this.requests = requests;
    });
  },
});

任何帮助表示赞赏

标签： javascripthtmlfirebasevue.jsgoogle-cloud-firestore