Vue.js + Wordpress REST API
ajax는 axios 이용.
html/css/js 통째로 코드
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue + WP-Rest</title>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to{
opacity: 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<posts></posts>
</div>
<script>
Vue.component('posts', {
data: function(){
return {
page: null,
posts: [], // placeholder、リアクティブにするために必須とのこと。
}
},
// watchだけで済ませてるのでマウント後でpage変更している。
mounted: function(){
this.page = 1;
},
// 非同期など複雑になってくる場合computedよりwatchの方が向いてるケースがあるとのこと。
watch: {
page: function(newpage){
var _component = this; // スマートじゃないやつ
// axios利用
axios.get(
'http://exsample.com/wp-json/wp/v2/posts?page=' + _component.page,
{sending: false}
)
.then(function(response){
// 普通に$setすると追加せず全記事が置き換わる。
_component.posts = _component.posts.concat(response.data);
return this;
});
}
},
methods: {
// リンククリックの処理
onclick: function(e){
console.log(e.title.rendered)
},
// 追加ローディングボタンクリック時の処理、page数を増やすだけ。
// 全てロード仕切った場合はpageは増えるがpostsが増えないので
// watchが動かず特にエラーもなく何も起きないがdisabled処理など別途必要。
loadMore: function(){
this.page++;
}
},
// 追加時フェードさせるためにtransition-groupとcss用意
template: [
'<div>',
'<transition-group name="fade" tag="ul">',
'<li v-for="post in posts" v-bind:key="post.title.rendered">',
'<a :href="post.slug" @click.prevent="onclick(post)">{{post.title.rendered}}</a>',
'</li>',
'</transition-group>',
'<button @click="loadMore">load more</button>',
'</div>'
].join('\n')
});
var vm = new Vue({
el: '#app',
})
</script>
</body>
</html>
라는 상태로 심플해졌습니다.
표시 결과
Reference
이 문제에 관하여(Vue.js + Wordpress REST API), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/nanonum/items/a335ba09fc2c2c4e3d5e
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue + WP-Rest</title>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to{
opacity: 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<posts></posts>
</div>
<script>
Vue.component('posts', {
data: function(){
return {
page: null,
posts: [], // placeholder、リアクティブにするために必須とのこと。
}
},
// watchだけで済ませてるのでマウント後でpage変更している。
mounted: function(){
this.page = 1;
},
// 非同期など複雑になってくる場合computedよりwatchの方が向いてるケースがあるとのこと。
watch: {
page: function(newpage){
var _component = this; // スマートじゃないやつ
// axios利用
axios.get(
'http://exsample.com/wp-json/wp/v2/posts?page=' + _component.page,
{sending: false}
)
.then(function(response){
// 普通に$setすると追加せず全記事が置き換わる。
_component.posts = _component.posts.concat(response.data);
return this;
});
}
},
methods: {
// リンククリックの処理
onclick: function(e){
console.log(e.title.rendered)
},
// 追加ローディングボタンクリック時の処理、page数を増やすだけ。
// 全てロード仕切った場合はpageは増えるがpostsが増えないので
// watchが動かず特にエラーもなく何も起きないがdisabled処理など別途必要。
loadMore: function(){
this.page++;
}
},
// 追加時フェードさせるためにtransition-groupとcss用意
template: [
'<div>',
'<transition-group name="fade" tag="ul">',
'<li v-for="post in posts" v-bind:key="post.title.rendered">',
'<a :href="post.slug" @click.prevent="onclick(post)">{{post.title.rendered}}</a>',
'</li>',
'</transition-group>',
'<button @click="loadMore">load more</button>',
'</div>'
].join('\n')
});
var vm = new Vue({
el: '#app',
})
</script>
</body>
</html>
Reference
이 문제에 관하여(Vue.js + Wordpress REST API), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/nanonum/items/a335ba09fc2c2c4e3d5e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
