Edited at

thisでdataの値が変更できない。

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


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)
})
}
});

単純なミスだけど、たまに

アワ((゚゚ωω゚゚ ))ワワ!!

ってなる。