aタグ遷移前にclick処理でFirestoreにデータを登録したい（Vue.js）

Question

やりたいこと

Vue.jsとFiresotreでアプリケーションを実装しています。
aタグで画面遷移する前にFirestoreにデータを登録したく、以下のように実装しています。

<a @click="addData" v-bind:href="path">リンク</a>

  methods: {
    addData: function() {
      
      const dataRef = db.collection('data');
      
      console.log("debug1");

      dataRef.add({
        value: this.value,
        createdAt: new Date()
      });

      console.log("debug2");

    }
  }

しかし、画面遷移後にFirestoreのコンソールを確認してもデータが登録されていません。

確認したこと

• console.logでコンソールに"debug1"と"debug2"が出力されていることは確認できました。

メソッド自体は呼び出されて最後まで実行されているようです。

• @clickにpreventを付与した場合、画面遷移しないためか、データも登録されていることを確認できました。

登録処理自体に間違いはないようです。

質問

firestoreのaddは非同期でされてると思いますが、登録が終わるまで遷移を待つ必要があるのでしょうか。
他に実現方法はあるでしょうか。

ご回答、よろしくお願いいたします。

Answer 1

待つ必要があると思います。以下のようにdataRef.addを同期にして、addDataの最後で画面遷移したらどうでしょうか

  methods: {
    addData: async function() {

      const dataRef = db.collection('data');

      console.log("debug1");

      await dataRef.add({
        value: this.value,
        createdAt: new Date()
      });

      console.log("debug2");

      window.location.href = this.path;
    }
  }

画面遷移しないようにhrefは#等にしておく

<a @click="addData" href="#">リンク</a>

Comments

[退会済みユーザー]

解決しました。ありがとうございました。
ということは、VueもFirestoreもあんまり関係なくてPromiseとaタグ遷移の問題だったんですね。