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

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

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

CMS(Content Management System)は複数のユーザーでコンテンツを編集することが可能なWebサイトの管理/構築用のプラットフォームを指します。また、会社単位で運用管理するものはECMと呼びます。

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

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

Q&A

解決済

2回答

1004閲覧

microCMSとNuxt.jsでaxiosを使用したAPI取得時にコンポーネント化すると出力できない

ttkun

総合スコア30

CMS

CMS(Content Management System)は複数のユーザーでコンテンツを編集することが可能なWebサイトの管理/構築用のプラットフォームを指します。また、会社単位で運用管理するものはECMと呼びます。

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

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

0グッド

0クリップ

投稿2020/02/15 05:53

編集2020/02/24 06:32

Nuxtにinfomationの情報をつけたいと思いヘッドレスCMSのmicroCMSを使ってみることにしました。
環境: MacOS(catalina)
NODE: v12.14.0
yarn: 1.21.1
vue: @vue/cli 4.1.2
nuxt: @nuxt/cli v2.11.0
mode: 'universal'(SSR)

axiosはインストール済みnuxt.configに追加。

nuxt.config.js

1 modules: [ 2 '@nuxtjs/axios', 3 ], 4 axios: { 5 // proxyHeaders: false 6 }, 7

下記の記事をもとにコードをかいていきました。
Nuxtで最近話題のMicroCMSを使用してFirebaseで公開する

まずはTopページにコードを記入、ここまでは無事出力できました。

index.vue

1<template lang="pug"> 2 main 3 mainvisual 4 section01 5 section02 6 section03 7 div 8 .items 9 .item-box(v-for='item in items' :key='item.id') 10 .name 11 | {{ item.title }} 12 13</template> 14 15<script> 16 17import Mainvisual from '~/components/home/Mainvisual.vue' 18import Section01 from '~/components/home/Section01.vue' 19import Section02 from '~/components/home/Section02.vue' 20import Section03 from '~/components/home/Section03.vue' 21 22export default { 23 components: { 24 Mainvisual, 25 Section01, 26 Section02, 27 Section03 28 }, 29 data () { 30 return { 31 items: '' 32 } 33 }, 34 async asyncData ({ $axios }) { 35 const data = await $axios.$get('------------------------------------', { 36 headers: { 'X-API-KEY': '-----------------------------------' } 37 }) 38 return { 39 items: data.contents 40 } 41 } 42} 43 44</script>

section4としてコンポーネント化しました。

index.vue

1<template lang="pug"> 2 main 3 mainvisual 4 section01 5 section02 6 section03 7 section04 8 9</template> 10 11<script> 12 13import Mainvisual from '~/components/home/Mainvisual.vue' 14import Section01 from '~/components/home/Section01.vue' 15import Section02 from '~/components/home/Section02.vue' 16import Section03 from '~/components/home/Section03.vue' 17import Section04 from '~/components/home/Section04.vue' 18 19export default { 20 components: { 21 Mainvisual, 22 Section01, 23 Section02, 24 Section03, 25 Section04 26 } 27} 28 29</script>

そしてデータが出力されたかと思いきや何もでてきません。

コンポーネント化するとどうして何も出力されないのでしょうか?
なにか別の設定があるのでしょうか?

※追記Section04.vueです。

Section04.vue

1<template lang="pug"> 2 div 3 .items 4 .item-box(v-for='item in items' :key='item.id') 5 .name 6 | {{ item.title }} 7 8</template> 9 10<script> 11export default { 12 data () { 13 return { 14 items: '' 15 } 16 }, 17 async asyncData ({ $axios }) { 18 const data = await $axios.$get('https://*******.microcms.io/api/v1/news', { 19 headers: { 'X-API-KEY': '****************************' } 20 }) 21 return { 22 items: data.contents 23 } 24 } 25} 26 27</script>

解決

<template lang="pug"> div .items .item-box(v-for='item in items' :key='item.id') .name | {{ item.title }} </template> <script> export default { data () { return { items: '' } }, mounted() { this.asyncData() }, asyncData () { await axios.get('https://*******.microcms.io/api/v1/news',{ headers: { 'X-API-KEY': '****************************' } }) .then(res =>{ console.log(res) this.items= res.data.contents }) } } </script>

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

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

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

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

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

guest

回答2

0

Section04.vue の中身がわからないので、想像ですが、 Section04 でも asyncData を使用していませんか?
asyncData はページコンポーネントで使えるもので、通常のコンポーネントでは使用できません。

コンポーネント内で非同期データを扱うには?

その場合は mounted に書くなどすればいいと思います。
違った場合は Section04 の内容を見せてもらえると……

投稿2020/02/15 06:02

aaharu

総合スコア441

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

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

ttkun

2020/02/15 06:36

Section04.vueのコンポーネント内でasyncDataを使用しています。 そうだったんですね。使えなかったんですね。
aaharu

2020/02/17 03:51

そうです。コメントしていますが、 `mounted` に書き換えるなどすると良いと思います。
guest

0

自己解決

下記のようにmountedに書き直したらうまくいきました。

vue

1<template lang="pug"> 2 div 3 .items 4 .item-box(v-for='item in items' :key='item.id') 5 .name 6 | {{ item.title }} 7 8</template> 9 10<script> 11export default { 12 data () { 13 return { 14 items: '' 15 } 16 }, 17 mounted() { 18 this.asyncData() 19 }, 20 asyncData () { 21 await axios.get('https://*******.microcms.io/api/v1/news',{ 22 headers: { 'X-API-KEY': '****************************' } 23 }) 24 .then(res =>{ 25 console.log(res) 26 this.items= res.data.contents 27 }) 28 } 29} 30</script> 31

投稿2020/02/24 06:21

ttkun

総合スコア30

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問