时间戳

首页 > 解决方案 > 无法在 vue 模板中显示 vuejs 数据属性

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

问题描述

我正在尝试使用事件总线从组件 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);
  }
}

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

标签： vue.jsevent-handling

解决方案

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

推荐阅读