Push () does not work in VueJS?

Question

Push () does not work in VueJS?

Navigation

#1 by (2 votes)
#2 by (2 votes)

4

I need to push () on the% void of VueJS and have it add another object to the array of objects it has there. But when I click the button I programmed to do this push () it just does not.

Follow the code below:

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>

Are you sure this way ??

This is the method I created to push the array of objects, and I have already checked the data coming from the server and everything is fine, it is returning correctly.

If someone can help me, I thank them ...

array vue.js

asked by anonymous 24.08.2017 / 15:06

2 answers

2

In this case, this is not referencing $ vm. You can do this:

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, like this:

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 .

24.08.2017 / 15:11

Find line that starts with expression negation CRUD with images, working with HttpPostedFileBase and byte []

score 2 · Accepted Answer

The function passed to the .then of the axes Promise changes the execution context of this function. You need to use arrow functions, or an alias as Ian suggested .

To use arrow function is just to change

}).then(function(response){

by

}).then((response) => {

Note also that you have this.emails.push({...}, console.log('PUSH!')) . This console.log is in the wrong place.

That is, the whole code, corrected:

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!')
}