前提・実現したいこと
Nuxt.jsで外部のWordpressの記事をjsonを利用して読み込み、最初に最新の9件を表示させてその後に「追加」ボタンでクエリの「page」の番号を1ずつ上げ全ての記事をボタンクリックで呼び出す処理を作りたいのですが、 インスタンスなどの引数を更新しても思った通りの処理が実現できません。
methodsを利用してイベントを追加すると思い試行錯誤したのですが、どうコードを書いたら上記の仕様を満たせますでしょうか?
よろしくお願いします。
該当のソースコード
<template> <div class="container-wrap01"> <ul class="archive__post-list"> <li v-for="post in posts" :key="post.id" class="parchive__post-card"> <article> <figure><a :href="post.link"><img :src="post._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url" :width="post._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.width" :height="post._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.height" :alt="post.title.rendered"></a></figure> <h2 class="archive__post-title"><a :href="post.link">{{ post.title.rendered }}</a></h2> <div class="archive__post-infomation"> <p>{{ post._embedded['wp:term'][0][0].name }}</p> <p>{{ post.date }}</p> </div> </article> </li> </ul> <button @click="fetch">追加</button> <p>{{ length }}件 fetch しました</p> </div> </template> <style Scoped> </style> <script> ///import wp from '@/assets/js/wp.js'; import axios from 'axios' class WpApi { // コンストラクタ constructor (siteurl,category,page,per_page) { this.apiBase = `${siteurl}/wp-json`; this.page = `${page}`; this.per_page = `${per_page}`; } posts () { return axios.get(`${this.apiBase}/wp/v2/posts?_embed`, { params: { page: this.page, per_page: this.per_page } }).then(json => { this.page = this.page+1; return { posts: json.data } }).catch(e => { return { error: e } }) } } let wp = new WpApi("https://sample.org","",1,9); export default { layout: 'blog', // ページコンポーネントの定義 data() { return { title: 'ブログ | illustration', posts: {} } }, head () { return { // このページ向けにメタタグを設定します title: this.title, } }, asyncData ({ params }) { return wp.posts(); }, created() { }, methods: { fetch() { } }, computed: { length() { return this.posts.length } } } </script>
あなたの回答
tips
プレビュー