Arrow function does not bind data with axios response

Question

import axios from 'axios'

export default {
name: 'FileList',
props: {
},
data () {
  return {
    pageSize: 10,
    offset: 0,
    model: "",
    rows: []
  }
},
mounted() {
  this.search();  
},
computed: {
},
methods:{
  search: function(){
     var url = 'http://myurl'


     var options = { headers: {
       'Authorization': localStorage.getItem("authToken")
     }}

     axios.get(url, options).then( (response) => {

        console.log('BEFORE:',this.rows)
        this.rows= response.data;
        console.log('AFTER:',this.rows)

     })
}

This function is not working even after finding this post: Axios can't set data and applying the solution. But this is what is being printed after loading the component:

Console logs

As you can see the post has the same problem as me.

Please, help me as i am getting desperate.

EDIT: After removing the setTimeout function since it didn help anything, i have included the render part. Since it is where i see the problem.

<div v-if="rows.length =! 0" class="row" v-for="row in rows" style="margin-top: 30px">
  <div class="col-6 offset-3">
    <div class="card text-left">
      <div class="card-body">
        <h5 class="card-title"><b>ModelID: {{row.modelID}}</b> </h5>
        <h6 class="card-subtitle mb-2 text-muted"><b>File Name: </b>{{row.fileName}}</h6>
        <h6 class="card-subtitle mb-2 text-muted"><b>Autor:</b> {{row.author}}</h6>
        <h6 class="card-subtitle mb-2 text-muted"><b>Created:</b> {{row.createdAt}}</h6>
        <h6 class="card-subtitle mb-2 text-muted"><b>Updated:</b> {{row.updatedAt}}</h6>
        <h6 class="card-subtitle mb-2 text-muted"><b>Name:</b> {{row.name}}</h6>
        <h6 class="card-subtitle mb-2 text-muted"><b>ID:</b> {{row.id}}</h6>
        <h6 class="card-subtitle mb-2 text-muted"><b>Hash:</b> {{row.hash}}</h6>
        <a href="#" class="card-link">Descargar</a>
      </div>
    </div>   
  </div>
</div>

you should also convert the callback inside `setTimeout` function to arrow function — Boussadjra Brahim, Dec 18 '18 at 16:27
@Boussadjra Brahim That was just for the logs, it was wrong but that didn't solve the problem — DanielDeLaCamara, Dec 18 '18 at 17:05

score 1 · Answer 1 · edited Dec 18 '18 at 18:06

1

The problem was with the v-if condition, is an assignation, not a negative conditional.

rows.length =! 0

Should have been

rows.length != 0

edited Dec 18 '18 at 18:06

Bert

80,741
17
199
164

answered Dec 18 '18 at 17:16

DanielDeLaCamara

21
3

Sometimes those are hard to spot! – Bert Dec 18 '18 at 18:07
1

@Bert Only to people not using linter! ;) – Vladislav Ladicky Dec 18 '18 at 18:55

Arrow function does not bind data with axios response

1 Answers1