質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

0回答

1047閲覧

Nuxt.jsでWordpressのjsonファイルを読み込み、その後「追加」ボタンで記事を増やしたいのですがうまく動作しません。

Aoi1125

総合スコア4

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

0クリップ

投稿2020/01/09 16:07

前提・実現したいこと

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dameo

2020/01/10 21:13

私はWordpressを扱ったことがないので、回答はできません。 ただし、やりたいことを少し分解して、1つずつ出来ることを増やした方がいいと思いますよ。 ・Wordpressの記事をjsonにする ・jsonにしたWordpress記事をXXXで取得する ・XXXで取得したjsonを元にYYYで表示する どこで何をするかによって、CORSの制約などに引っかかると思うので、少しボカしました。 XXXやYYYを決めた上で、これらを実現するためにどんな技術要素を使用するか検討し、1つずつ実現可能なことを確認し、全てが確認出来てから作り始めた方がいいと思うということです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問