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

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

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

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

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Q&A

解決済

1回答

2396閲覧

vueとFirebaseを使ってFirebaseのDBから値を取りたいができない

anonyrabbit

総合スコア78

Vue.js

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

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

0グッド

0クリップ

投稿2018/09/23 08:54

表題の通りです。
DBから値を取り出し、html側で表示したいと思っております。
こちらのページを参考にやっているのですが、下記のエラーが出てしまいます。

client.js:522 TypeError: WEBPACK_IMPORTED_MODULE_6__plugins_firebase.a.database(...).ref(...).child(...).val is not a function

at name (index.js:67) at wrappedGetter (vuex.esm.js:734) at Vue.computed.(anonymous function) (http://localhost:3000/_nuxt/vendor.js:89571:42) at Watcher.get (vue.runtime.esm.js:3138) at Watcher.evaluate (vue.runtime.esm.js:3245) at Vue.computedGetter [as name] (vue.runtime.esm.js:3503) at Object.get [as name] (vuex.esm.js:536) at VueComponent.mappedGetter (vuex.esm.js:852) at Watcher.get (vue.runtime.esm.js:3138) at Watcher.evaluate (vue.runtime.esm.js:3245)

今のコードはこれです。

Javascript

1async mounted () { 2 if (process.browser) { 3 let user 4 if (!this.user) user = await auth() 5 await Promise.all([ 6 this.user ? Promise.resolve() : this.$store.dispatch('setUser', { user: user || null }), 7 ]).then((user) => { 8 firebase.database().ref("users").once("value") 9 .then((snapshot => { 10 var name = snapshot.child(`${user.uid}/displayName`).val() 11 console.log(name) 12 })) 13 }) 14 this.isLoaded = true 15 } 16 },

FirebaseのDBでの階層構造は、
-users
. - uid
. - displayName
. email etc...

というようになっています。ご回答よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

自己解決

vuexの方に
name: state => firebase.database().ref(users/${state.user.uid}).child("displayName").val(),
というコードを書いていてそれのせいでエラーになっていたようでした。。。
firebase.database().ref("users").once("value")
.then((snapshot => {
var name = snapshot.child(${this.user.uid}/displayName).val()
// var name = snapshot.val;
console.log(name)
}))
でnameが出力できました!

投稿2018/09/23 09:03

anonyrabbit

総合スコア78

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問