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

Question

前提・実現したいこと

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)
          })
        })
     }
  }
}

Answer 1

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

uploadImageOfClan(file_name, file) {
    return new Promise((resolve, reject) => {
        firebase.storage().ref('clan/images/' + file_name)
            .put(file)
            .then(snapshot => {
                snapshot.ref.getDownloadURL().then(url => {
                    this.imageUrl = url;
                    console.log(this.imageUrl)
                    return resolve()
                })
            })
            .catch(err =>{
                return reject(err)
            })
    });
}