Error to popular Array with Vuejs + Firebase

Question

I’m Dev Ror and I’m in my initial studies with Vuejs. To do so, I started creating a Todolist with Firebase for data persistence and a problem occurred to me.

I created a function to return data from Firebase.

https://github.com/luizpicolo/ToDo.list/blob/8e2ba8cba714a9541ef0c91cf38d4ae69ae915c7/js/database.js#L22

So, when there is a change or inclusion of some data in the database, Firebase returns all the data that is presented through this instance of Vue.

https://github.com/luizpicolo/ToDo.list/blob/8e2ba8cba714a9541ef0c91cf38d4ae69ae915c7/js/main.js#L1

However, when making the first call of the function listTasks(), in line 4 on the link above, it returns me the data correctly. But when there is the change, the vector is not reassembled, but concatenated with the new values, that is, I have duplicate data.

How would you make so that, whenever there was new data or change, Vue does not concatenate the vector?

I believe it is something of Vue through all the tests I have done so far. But this is just an achimos initially.

Answer 1

The error was in the function either returned the data. Instead of the method on I used the method once. It worked the way you wanted it to. [https://firebase.google.com/docs/database/web/read-and-write?hl=pt-br][3]

function listTasks(){
    var tasks = [];
    var listTasks = database.ref('tasks');
    listTasks.once('value', function(snapshot) {
      snapshot.forEach(function(childSnapshot) {
         tasks.push(childSnapshot.val());
      });
    });

    console.log(tasks);
    return tasks;
}

Answer 2

Long live,

It seems to me that the problem is that the array tasks is not being cleaned before you get the data from the database.

Try it like this:

function listTasks(){
  var listTasks = database.ref('tasks');
  listTasks.on('value', function(snapshot) {
    var tasks = [];
    snapshot.forEach(function(childSnapshot) {
       tasks.push(childSnapshot.val());
    });
});

Answer 3

methods: {
  addTodoInList: function(){
    this.tasks = []
    writeTask(11, "teste 7", "12/12/2012", 'Lorem Ipsum 3');
  }
}

function listTasks(){
  var tasks = []; // REMOVA ESSA LINHA
  var listTasks = database.ref('tasks');
  listTasks.on('value', function(snapshot) {
    snapshot.forEach(function(childSnapshot) {
       tasks.push(childSnapshot.val());
    });
  });

  console.log(tasks);
  return tasks;
}