无法在 vue 模板中显示 vuejs 数据属性

如何解决无法在 vue 模板中显示 vuejs 数据属性

我正在尝试使用 eventbus 从组件 A 发送数据：

<template>  
        <div v-for="(user,index) in users" :key="index" class="col-lg-6">
          <div class="card card-primary card-outline"> 
            <div class="card-body d-flex">
              <h1 class="mr-auto">{{ user.name }}</h1>
              <a href="#" @click="envoyerDetails(user)" class="btn btn-primary ml-auto">Afficher</a>
            </div>
          </div>
        </div>
</template>

<script>
export default {
  data() {
    return {
      users: {},}
  },methods: {
    envoyerDetails($data){
      Fire.$emit('envoyer_details_projet',$data);
      this.$router.push('details-projet');
    },loadUser() {
      if(this.$gate.isAdmin()){
        axios.get("api/user").then(({ data }) => (this.users = data.data));
      }
    }
  },mounted() {
    this.loadUser()
  }  
}
</script>

在组件 B 中，我收到数据，我想以这种方式在模板中显示它：

<template>
      <div class="right_col text-center" role="main">
        <h5><b>name: {{ user.name }}</b> </h5>          
      </div>
</template>

export default {
  data() {
    return {
      user: {},methods: {
    afficherDetails (args) {
      this.user = args;
      console.log(this.user.name);
    }
  },mounted() {
    Fire.$on('envoyer_details_projet',this.afficheDetails);
  }
}

数据不显示在模板中，而是显示在控制台中。我错过了什么？

解决方法

也许当您在组件 A 中发出事件 envoyer_details_projet 时，但组件 B 尚未安装，因此无法接收数据。