Событие выброса Vue.js из дочернего компонента не перехвачено

Question

Событие выброса Vue.js из дочернего компонента не перехвачено

1

У меня есть дочерний компонент, который извлекает некоторые данные с моего сервера, перед извлечением я меняю статус загрузки на 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:

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

Моя проблема заключается в том, что первая Испустите работает и isLoading установлено значение true, а второй не работает и моя isLoading стоимость пребывания, чтобы true навсегда... В моем методе updateLoadingStatus я вхожу в status значения, и я вижу, что этот метод называется только один раз.

Hugo-Contreras 27 нояб. 2017, в 22:50

Источник

0

Важные замечания: во-первых, вы используете this.$emit() .then() контексте .then() . Вы можете столкнуться с проблемами, когда this ссылается на контекст, отличный от экземпляра Vue. Попробуйте сделать что-то вроде var this_vue_instance = this; перед входом в Promise , затем используйте this_vue_instance.$emit() . Что касается ваших проблем с захватом излучения, я сам не проверял это, но, возможно, использование двоеточия в ваших событиях вызывает проблемы? Я бы попытался исключить его как быстрый тест, чтобы убедиться, что он не противоречит синтаксису.
B. Fleming 27 нояб. 2017, в 21:27
0

Он использует синтаксис стрелки, который автоматически связывает это с внешней областью видимости. Двоеточие в событиях не будет проблемой, потому что само Vue фактически использует это для своих собственных событий в .sync Vue в одной из последних версий. Какую версию Vue вы используете? Редактировать: ключ атрибута, имеющий двоеточие, может быть проблемой.
jostrander 27 нояб. 2017, в 21:49
0

"vue": "^2.5.8"
Hugo 27 нояб. 2017, в 21:50
0

То, что вы описываете, является почти таким же функционально, что .sync предоставляет в версии 2.3.0 Vue и позже. vuejs.org/v2/guide/components.html#sync-Modifier фактически Vue сама использует событие @update:key key, которое может быть источником вашей проблемы.
jostrander 27 нояб. 2017, в 21:52
0

Я также попробовал что-то подобное v-on:loadingMessage="updateLoadingMessage($event)" v-on:isLoading="updateLoadingStatus($event)" и это тоже не сработало.
Hugo 28 нояб. 2017, в 00:38
0

Например, при использовании v-on:isLoading=updateLoadingStatus($event) вы фактически не собираетесь захватывать передаваемые аргументы. Чтобы захватить их, обязательно сделайте v-on:isLoading="updateLoadingStatus($event, arguments)" . Затем вы можете получить доступ к параметру arguments в виде массива.
B. Fleming 28 нояб. 2017, в 04:44
0

@B.FlemingB.Fleming Согласно моим тестам, вы ошибаетесь, когда я делаю это updateLoadingStatus(event, args) { this.$log.debug(event); this.$log.debug(args); this.isLoading = event; }, в консоли у меня true и undefined , поэтому нет 2-х параметров. И моя настоящая проблема в том, что эта функция вызывается один раз, а не 2 раза ...
Hugo 28 нояб. 2017, в 13:08

Показать ещё 5 комментариев

Теги:

javascript

vue.js

1 ответ

Ещё вопросы

Важные замечания: во-первых, вы используете this.$emit() .then() контексте .then() . Вы можете столкнуться с проблемами, когда this ссылается на контекст, отличный от экземпляра Vue. Попробуйте сделать что-то вроде var this_vue_instance = this; перед входом в Promise , затем используйте this_vue_instance.$emit() . Что касается ваших проблем с захватом излучения, я сам не проверял это, но, возможно, использование двоеточия в ваших событиях вызывает проблемы? Я бы попытался исключить его как быстрый тест, чтобы убедиться, что он не противоречит синтаксису.
Он использует синтаксис стрелки, который автоматически связывает это с внешней областью видимости. Двоеточие в событиях не будет проблемой, потому что само Vue фактически использует это для своих собственных событий в .sync Vue в одной из последних версий. Какую версию Vue вы используете? Редактировать: ключ атрибута, имеющий двоеточие, может быть проблемой.
То, что вы описываете, является почти таким же функционально, что .sync предоставляет в версии 2.3.0 Vue и позже. vuejs.org/v2/guide/components.html#sync-Modifier фактически Vue сама использует событие @update:key key, которое может быть источником вашей проблемы.
Я также попробовал что-то подобное v-on:loadingMessage="updateLoadingMessage($event)" v-on:isLoading="updateLoadingStatus($event)" и это тоже не сработало.
Например, при использовании v-on:isLoading=updateLoadingStatus($event) вы фактически не собираетесь захватывать передаваемые аргументы. Чтобы захватить их, обязательно сделайте v-on:isLoading="updateLoadingStatus($event, arguments)" . Затем вы можете получить доступ к параметру arguments в виде массива.
@B.FlemingB.Fleming Согласно моим тестам, вы ошибаетесь, когда я делаю это updateLoadingStatus(event, args) { this.$log.debug(event); this.$log.debug(args); this.isLoading = event; }, в консоли у меня true и undefined , поэтому нет 2-х параметров. И моя настоящая проблема в том, что эта функция вызывается один раз, а не 2 раза ...

Hugo-Contreras · Answer 1 · 2018-01-04T16-42-00.000Z

Я решил проблему, используя v-show вместо v-if в моем шаблоне.

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