<div id="app">
<div id="wrapper">
<h1>Vue+axiosを使ってwordpressの投稿データを取ってくる</h1>
<p>取得できる投稿数はデフォルトで10件、最大100件です。</p>
<button v-on:click="getData">データを取得する</button>
<button v-on:click="deleteData">データを削除する</button>
<hr>
<ul id="wp_list">
<li v-for="data in all_data" :key="data.id">
<a v-bind:href="data.link">
{{ data.title.rendered }}</a></li>
</ul>
</div>
</div>#wrapper{
width:800px;
margin:auto;
}
button{
margin: 0 0 20px 0;
}Vue.config.devtools = true;
var app = new Vue({
el: "#app",
data: {
all_data: [],
url:
"https://the-zombis.sakura.ne.jp/wp/wp-json/wp/v2/posts?_fields=title,link,id"
},
created: function () {
},
methods: {
getData() {
this.all_data=[]; //初期化
axios
.get(this.url)
.then((response) => {
this.all_data = response.data;
console.log(this.all_data);
})
.catch((err) => {
console.error(err);
});
},
deleteData(){
document.getElementById("wp_list").innerHTML = '';
}
}
});
External CSS
This Pen doesn't use any external CSS resources.