Question

从Vue.js v-for创建的用户列表中的Firebase Realtime数据库中删除数据时，我遇到了一个小问题。在我的小型项目中，我有一个数据库，该数据库返回到有关用户的Vuex数据，并且当我通过firebase函数 .remove（）删除任何用户时，组件中的视图将重新呈现，但数据重复。然后，我的列表看起来像是已删除用户的旧列表，再加上一次没有该用户的列表。刷新页面时，列表没有任何删除用户。

有人想到吗？

在USER中删除数据的组件USER很好，因为在数据库上删除该用户没有问题：

methods: {
  removeUser() {
    firebase
      .database()
      .ref(`users/${this.user.id}`)
      .remove()
  }
}

我不会从Vuex中手动删除它，因为此.remove（）函数运行我的函数以将数据保存在Vuex中：

initUsers() {
  firebase
    .database()
    .ref('/users')
    .on('value', snapshot => {
      snapshot.forEach( childSnapshot => {
        this.usersList.push({
          username: childSnapshot.val().email,
          admin: childSnapshot.val().admin,
          id: childSnapshot.key
        })
      })
    });
},

Answer 1

我认为这是由于您没有在监听器中重新初始化usersList数组。

因此，当第一次显示页面时，将其填充一次，然后在后端删除记录时，（再次）将数据库中的（仍然）现有记录（再次）推送到初始数组。

如果您执行以下操作，则它应该可以工作：

initUsers() {
  firebase
    .database()
    .ref('/users')
    .on('value', snapshot => {
      this.usersList = [];  //<-- init to empty array
      snapshot.forEach( childSnapshot => {
        this.usersList.push({
          username: childSnapshot.val().email,
          admin: childSnapshot.val().admin,
          id: childSnapshot.key
        })
      })
    });
},

从实时数据库中删除数据的问题

1 个答案: