🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Vue.js

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

Firebase

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

Nuxt.js

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

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Q&A

1回答

314閲覧

vue.jsでdata()に定義した変数に値を格納することができない

hotChocolate

総合スコア5

Vue.js

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

Firebase

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

Nuxt.js

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

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

0グッド

0クリップ

投稿2019/11/15 01:12

前提・実現したいこと

nuxt.jsとfirebaseでwebアプリを作成しています。
firestorageにアップした画像のurlを取得し、それを変数に格納する処理を書いているのですが、なぜか格納されずに困っています。
お心当たりある方いましたら助けて頂けないでしょうか...!

発生している問題・エラーメッセージ

uploadImageOfClan内のconsole.logではurlが出力されるが、submit内では空文字のままになっている。

該当のソースコード

export default { data() { return { clan_name: '', clan_introduction: '', uploadedImage: '', imageUrl: '', valid_clan_name: false } }, methods: { async submit() { const file_name = uuid() await this.uploadImageOfClan(file_name, this.uploadedImage) console.log(this.imageUrl) }, uploadImageOfClan(file_name, file) { firebase.storage().ref('clan/images/' + file_name) .put(file) .then(snapshot => { snapshot.ref.getDownloadURL().then(url => { this.imageUrl = url        console.log(this.imageUrl) }) }) } } }

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

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

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

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

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

guest

回答1

0

await句を用いるときには、Promiseオブジェクトを返却する必要があるように思います。こちらをためしてみてはいかがでしょうか。

javascript

1 2uploadImageOfClan(file_name, file) { 3 return new Promise((resolve, reject) => { 4 firebase.storage().ref('clan/images/' + file_name) 5 .put(file) 6 .then(snapshot => { 7 snapshot.ref.getDownloadURL().then(url => { 8 this.imageUrl = url; 9 console.log(this.imageUrl) 10 return resolve() 11 }) 12 }) 13 .catch(err =>{ 14 return reject(err) 15 }) 16 }); 17} 18

投稿2019/11/19 06:44

yakumomutsuki

総合スコア12

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問