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

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

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

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

Nuxt.js

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

Q&A

解決済

2回答

1199閲覧

【Nuxt.js】computedで取得したfirestoreのデータをv-forで表示したい

heureux

総合スコア20

Vue.js

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

Nuxt.js

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

0グッド

1クリップ

投稿2020/06/20 05:20

Nuxt.jsでwebアプリを構築しています。

firestoreのデータをNuxtプロジェクトのcomputedで取得し、画面に表示したいのですが
現状何も表示されません。
特にエラーも表示されません。

▼pages/index.js <template> <div id="Content"> <div v-for="item in items" :key="item.id"> <Item :item="item" /> </div> </div> </template> <script> import firebase from '~/plugins/firebase' import Item from '~/components/Item.vue' export default { components: { Item }, computed: { items () { const db = firebase.firestore() const itemArray = [] db.collection('items').get().then((querySnapshot) => { querySnapshot.forEach((doc) => { itemArray.push(doc.data()) }) console.log(itemArray) //consoleにはforestoreから取得した値が表示されている return itemArray }) } } } </script>

↑computedの最後で、firestoreから取得した配列をreturnしているのですが、どうもここに値が入っていないようです。(その直前のconsoleではきちんと値が出力される)

▼components/Item.vue <template> <div> <p>{{ item.image }}</p> <p>{{ item.tag }}</p> </div> </template> <script> export default { props: { item: { type: Object, default: null } } } </script>

何が間違っているのか分からないため、ご教示いただけますと幸いです。

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

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

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

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

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

guest

回答2

0

自己解決

やろうとしていた事は非同期通信になり、computedは非同期通信はサポートされていないんですね!
createdで取得するとうまく行きました!ありがとうございます!

投稿2020/06/25 00:40

heureux

総合スコア20

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

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

0

computedの中での非同期通信はサポートされていません

computedである必要性が無さそうなので、createdとdataを活用すれば実装ができそうです

javascript

1data() { 2 return { items: [] } 3}, 4created() { 5 const db = firebase.firestore() 6 db.collection('items').get().then((querySnapshot) => { 7 this.items = querySnapshot.map(doc => doc.data()) 8 }) 9}

投稿2020/06/24 10:30

ymneet

総合スコア154

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問