时间戳

首页 > 解决方案 > 在 Vue js 中未触发创建

javascript - 在 Vue js 中未触发创建

问题描述

我正在使用 Vue Js 实现一个应用程序，并且我有以下代码：

<template>
    <simple-page title="list-patient" folder="Patient" page="List Patient" :loading="loading">
        <list-patients @patientsLoaded="onPatientsLoaded"/>
    </simple-page>
</template>

simple-page 和 list-patients 都是我创建的自定义组件。在 ListPatients 中，我有一个关于 Create 回调的 HTTP 请求，如下所示：

created() {
        axios.get("...").then(response => {
            ...
            this.$emit('patientsLoaded');
        })
 },

然后，我的目标是处理 patientsLoaded 事件并更新顶级父组件上的 loading 道具，如下所示：

data() {
        return {
            loading: true
        }
    },   
methods: {
        onPatientsLoaded(params) {
            this.loading = false;
        }
    }

但是，在 list-patients 组件中不会触发 created 方法。我可以完成这项工作的唯一方法是删除：加载。任何人都可以帮忙吗？

编辑 1 简单页面的代码：

<template>
<section :id="id">
    <!-- Breadcrumb-->
    <breadcumb :page="page" :folder="folder"/>
    <!-- Breadcrumb-->
    <!-- Simple Card-->
    <simple-card :title="page" :icon="icon" :loading="loading" v-slot:body>
        <slot>

        </slot>
    </simple-card>
    <!-- Simple Card-->
</section>
</template>

简易卡代码：

<b-card>
    <!-- Page body-->
    <slot name="body" v-if="!loading">

    </slot>
    <!--Is loading-->
    <div class="loading-container text-center d-block">
        <div v-if="loading" class="spinner sm spinner-primary"></div>
    </div>
</b-card>

标签： javascriptvue.jsvue-component

解决方案

您的列表患者组件位于名称为“body”的插槽中。该插槽有一个 v-if 指令，因此基本上它不会被渲染，并且钩子也无法访问。也许将 v-if 更改为 v-show 会在这种情况下以某种方式帮助您。无论如何，你有深度嵌套的插槽，这让事情变得一团糟。我通常在组件内部声明加载变量，其中将呈现获取数据。例如：

data () {
  return {
    loading: true;
  };
},
mounted() {
  axios.get('url')
    .then(res => {
      this.loading = false;
    })
}

并在您的模板中：

<div v-if="!loading">
  <p>{{fetchedData}}</p>
</div>
<loading-spinner v-else></loading-spinner>

idk 也许这不是最佳实践解决方案

推荐阅读