aixos reponse data can not assign to Vue instance's data

Question

In my vue.js project, i get an array data by axios, and want to assign to bookList variable, but failed, bookList still equal to [], could you tell me why?

export default {
...
data () {
  return {
    bookList: []
  }
},
mounted: function() {
  this.$nextTick(function(){
    this.viewBooks();
  });
},
methods: {
  viewBooks: function() {
    axios.get('/books.json')
      .then(res=>{
        this.bookList = res.data.bookList;
      })
      .catch(error=>{
        console.log(error);
      });
  }
}

Your code works (https://jsfiddle.net/k85pnp29/1/), so there must be something wrong with some code you're not including — thanksd, Aug 24 '17 at 18:27

score 0 · Answer 1 · answered Aug 24 '17 at 15:45

0

The callback is on a different scope...this should work

methods: {
    viewBooks: function() {
        let self = this;
        axios.get('/books.json')
            .then(res=>{
                self.bookList = res.data.bookList;
            })
            .catch(error=>{
                console.log(error);
            });
    }

There's also a different answer here

answered Aug 24 '17 at 15:45

Murwa

2,238
1
20
21

Thanks. I tried, and "this" binds to vue instance when i use arrow function in ES6 standard, so the problem still exists. – Aug 24 '17 at 16:15
His callback is fine. Arrow functions capture the lexical scope. – Bert Aug 24 '17 at 16:15
Yeah, I saw that on the linked questions – Murwa Aug 24 '17 at 16:20

aixos reponse data can not assign to Vue instance's data

1 Answers1