Push() does not work in Vuejs?

Question

I need to push() the data of Vuejs and make it add another object in the object array it has there. But when I click on the button I programmed for you to push() it just doesn’t.

Follows code:

atualizar () {
    axios({
      method: 'get',
      url: '/server/inbox'
    }).then(function (response) {
      console.log(response.data)
      for (let e = 0; e < response.data.length; e++) {
        this.emails.push(
          {
            remetente: response.data.remetente,
            destinatario: response.data.destinatario,
            assunto: response.data.assunto,
            texto: response.data.texto
          },
          console.log('PUSH!')
        )
      }
    })
      .catch(function (err) {
        console.log(err)
      })
    console.log('Fim!')
  }

HTML:

<q-list no-border link inset-separator>
      <q-item v-for="email in emails" :key="email.id">
        <q-item-side icon="email"/>
        <q-item-main>
          <q-item-tile :label="emails.remetente">{{ email.remetente }}</q-item-tile>
          <q-item-tile :sublabel="emails.assunto">{{ email.assunto }}</q-item-tile>
        </q-item-main>
      </q-item>
    </q-list>

You’re right that way??

This is the method I created to push the object array, and I’ve already checked the data coming from the server and it’s all right, it’s coming back in the right way.

If anyone can help me I’d appreciate it...

Answer 1

The function passed to . then da Promise from Axios changes the execution context of that function. You must use Arrow functions, or an alias as Ian suggested.

To use Arrow Function just change

}).then(function(response){

for

}).then((response) => {

Look what you got this.emails.push({...}, console.log('PUSH!')). That one console.log is in the wrong place.

That is, the whole code, fixed:

atualizar() {
  axios({
      method: 'get',
      url: '/server/inbox'
    }).then((response) => {
      console.log(response.data)
      for (let e = 0; e < response.data.length; e++) {
        this.emails.push({
          remetente: response.data.remetente,
          destinatario: response.data.destinatario,
          assunto: response.data.assunto,
          texto: response.data.texto
        });
        console.log('PUSH!', e);
      }
    })
    .catch(function(err) {
      console.log(err)
    })
  console.log('Fim!')
}

Answer 2

In that case the this is not referencing $vm. You can do so:

atualizar () {
  var self = this;

  axios({
    method: 'get',
    url: '/server/inbox'
  }).then(function (response) {
    console.log(response.data)
    for (let e = 0; e < response.data.length; e++) {
      self.emails.push(
      {
        remetente: response.data.remetente,
        destinatario: response.data.destinatario,
        assunto: response.data.assunto,
        texto: response.data.texto
      })
    }
  })
  .catch(function (err) {
    console.log(err)
  })
  console.log('Fim!')
}

you can improve your code a little bit, so:

atualizar () {
  var self = this;

  axios.get('/server/inbox')
    .then(({data}) => {
      for (let e = 0; e < data.length; e++) {
        self.emails.push({
          remetente: data.remetente,
          destinatario: data.destinatario,
          assunto: data.assunto,
          texto: data.texto
        })
      }
    })
    .catch((err) => {
      console.log(err)
    })
  console.log('Fim!')
}

You can understand more about this, in this series of videos.