thisのスコープ問題

ただのスコープ問題ですが、忘れたときにあたふたするのでメモ。

index.js

var app = new Vue({
    el: "#posts",
    data: {
        posts: []
    },
    created: function() {
        axios.get("https://○○○/wp-json/wp/v2/posts/").then(function(response) {
            this.posts = response.data;
            console.log(this.posts)
        })
    }
});

// this.postsは[]のまま

then()の中ではthisの参照先が変わってしまうので、this.postsに値を代入してもdata内のpostsは変更されない。
then()の外で変数にthisを代入して、代入した変数をthen()の中で使用することで解決！

index.js

var app = new Vue({
    el: "#posts",
    data: {
        posts: []
    },
    created: function() {
        var self = this;
        axios.get("https://○○○/wp-json/wp/v2/posts/").then(function(response) {
            self.posts = response.data;
            console.log(self.posts)
        })
    }
});

単純なミスだけど、たまに
ｱﾜ((ﾟﾟωωﾟﾟ ))ﾜﾜ!!
ってなる。