javascript - Vue.js 从未捕获的子组件发出事件

Question

我有一个从我的服务器获取一些数据的子组件，在获取之前我将加载状态更改为 true，我想在获取完成后将其设置为 false。所以我在我的子组件中做了类似的事情:

mounted() {
    this.$emit('update:loadingMessage', 'Loading version options from Artifactory...');
    this.$emit('update:isLoading', true);
    this.fetchVersions();
},

methods: {
    fetchVersions() {
        const promises = [
            this.$http.get(`${process.env.API_URL}/version/front`),
            this.$http.get(`${process.env.API_URL}/version/back`),
        ];
        Promise.all(promises)
            .then((values) => {
                // Do some stuff
            })
            .then(() => {
                this.$emit('update:isLoading', false);
            })
            .catch(requestService.handleError.bind(this));
    },
},

在我的父组件中，我是这样收听这个事件的:

<version-selector
    :form="form"
    @update:loadingMessage="updateLoadingMessage"
    @update:isLoading="updateLoadingStatus"
    :isSnapshotVersion="isSnapshotVersion">
</version-selector>

最后，在 updateLoadingStatus 中，我将 isLoading 值相应地设置为 true 或 false。

updateLoadingMessage(message) {
  this.$log.debug(message);
  this.loadingMessage = message;
},
updateLoadingStatus(status) {
  this.$log.debug(status);
  this.isLoading = status;
},

这对于显示或不显示我的 loading 组件很有用:

<loading
    v-if="isLoading"
    :loadingMessage="loadingMessage"
    :isGiphy="true">
</loading>

我的问题是第一个 emit 工作正常并且 isLoading 值设置为 true 但第二个不工作并且我的 isLoading 值永远保持为 true... 在我的方法 updateLoadingStatus 中，我记录了 status 值，我看到这个方法只被调用一次。

Answer 1

我通过在模板中使用 v-show 而不是 v-if 解决了这个问题。

<loading
  v-show="isLoading"
  :loadingMessage="loadingMessage"
  :isGiphy="true">
</loading>