javascript - vue initialization data assignment error

Question

vue code

<script>
import axios from 'axios';
export default {
    data() {
        return {
            titleList: [],
        }
    },
    created() {
        this.axios.get('XX').then(function(response) {
            console.log(response.data);
            this.titleList=response.data;
        }).catch(function (error) {
            console.log(error);
        });
    }
}
</script>

Error reporting

TypeError: Cannot set property 'titleList' of undefined
Type error, cannot set undefined property,

data

response.data is an object array
I have initialized titleList, but I don’t know why it says it is undefined, please give me an answer

Answer 1

This pointer has changed. You can print out this to see who it points to

---

Solution

1. Use arrow function
2. Save this (let _this = this)

Answer 2

.then(res => {
    this.titleList = res;
})

Answer 3

this.axios.get('XX')
    .then(function (response) {
      response=response.body;
      this.titleList=response.data;
    })
    .catch(function (error) {
      console.log(error);
})

Try this. If it doesn't work, post the error and take a look!

Answer 4

This pointer is lost, you can use arrow function, or you can use a variable to save this let _this = this

Answer 5

When I use axios to request data, I remember to introduce the axios class library globally in the program entry file main.js. After importing it, try using Vue.prototype.$http=axios. Then it can be used globally. As for the upstairs You can try this pointer issue pointed out in the answer given. I am used to the syntax of es6, so arrow functions are generally used in projects

Answer 6

axios.get('***').then((res) => {
    this.titleList=res.data;
});

Try this way