0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Vue × Firestore】ボタンを発火させた際、認証ユーザーページをリロードさせる

Posted at

ボタンを発火させた際、認証ユーザーページをリロードさせる

mypage.vue
<button @click="updateBtn" class="update-btn flex">更新</button>
mypage.vue
<script>
import firebase from "firebase";
import Header from "@/components/header.vue";
import Vue from "vue";

  ~ 省略 ~

  methods: {
    updateBtn() {
      firebase
        .firestore()
        .collection("users")
        .doc(this.$route.params.uid)
        .set(
          {
            name: this.name,
            sex: this.sex,
            age: this.age,
            access: this.access,
            selfpr: this.selfpr,
            profession: this.profession,
            uploadedImage: this.uploadedImage,
            genre: this.genre,
            favMovie: this.favMovie,
            time: firebase.firestore.FieldValue.serverTimestamp(),
          },
          { merge: true }
        );
      this.$swal({
        title: "内容確認",
        text: "この内容で投稿しますか?",
        icon: "info",
        buttons: true,
        dangerMode: true,
      }).then((willDelete) => {
        if (willDelete) {
          this.$swal("投稿しました。", {
            icon: "success",
          });
          this.$router.go({
            path: `/mypage/${this.$route.params.uid}`,
            force: true,
          });
          //プロフィール編集されたらページをリロード
        } else {
          this.$swal("キャンセルしました。");
        }
      });
    },

  ~ 省略 ~

</script>

updateBtn()が押下されたらページをリロードさせるようにしてますが、

動的ルートマッチング「this.$route.params」について

上記記事でも書かせて頂いたように、this.$route.params.uidで現在のURLのパラメータを取得して
単純に/mypage/${this.$route.params.uidという形式でリロードをさせてます。

router.js
 {
    path: "/mypage/:uid",
    name: "Mypage",
    component: Mypage,
    meta: { requiresAuth: true },
  },
mypage.vue
this.$router.go({path: `/mypage/${this.$route.params.uid}`,force: true,});
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?