Vue js 获取数据

Question

我有一个应用程序 VUE JS 我在导航栏中遇到问题，导航栏包含图像用户，如果我单击图像用户个人资料，将我带到个人资料，但如果我导航到另一个用户个人资料，并且我想进入我的个人资料配置文件路径更改，但数据不会加载到登录用户，但如果我重新加载页面，如果我单击导航加载数据中的用户图像配置文件，数据将获取到我想要的登录用户。

此方法处理导航组件中的点击用户图像配置文件，我导入 CoachDetails 方法但不获取数据

<script>
import CoachDetails from "../../views/coaches/CoachDetails.vue";
export default {
  methods: {
    mainUserProfile() {
      this.$router.replace(`/coaches/${this.userId}`);
      if (CoachDetails.methods && CoachDetails.methods.loadCoachesDtails) {
        CoachDetails.methods.loadCoachesDtails();
      }
    },
 {
};
</script>

此脚本是 CoachDetails 组件脚本，用于处理从数据库获取数据

<script>
export default {
  props: ["id"],
  methods: {
    async loadCoachesDtails(refresh = true) {
      this.isLoading = true;
      console.log("before");
      try {
        await this.$store.dispatch("coaches/loadCoachData", {
          importRefresh: refresh,
        });

        console.log("after");

        this.theSelectedCoach = this.$store.getters["coaches/coaches"].find(
          (coach) => coach.id === this.id
        );

        this.error = null;
      } catch (err) {
        this.error = err || "Something went worng!!";
      } finally {
        this.isLoading = false;
      }
    },
  },
  created() {
    this.loadCoachesDtails();
  },
};

我尝试在 mainUserProfile 方法中获取数据，但没有按预期工作，我尝试从存储操作中分派加载数据方法，但也不起作用

Answer 1

你可以试试这个。

<template>
    <CoachDetails ref="CoachDetails" v-show="false" />
</template>
<script>
import CoachDetails from "../../views/coaches/CoachDetails.vue";
export default {
    methods: {
        mainUserProfile() {
            // some ....
            if (this?.$refs['CoachDetails']?.loadCoachesDtails) {
                this.$refs['CoachDetails'].loadCoachesDtails();
            }
        }
    }
}
</script>