Доступ к объекту события из глобальной шины событий в VueJS

Question

У меня есть несколько страниц (в Laravel), каждая из которых включает форму с различными URI действия:

<form method="post" action="/route1">
    ...
    <button @click="emitEvent('event1')">
</form>

В корне Vuejs у меня есть только метод, который вызывает событие глобально:

const app = new Vue({
    el: '#app',
    methods: {
        emitEvent(event, payload) {
            EventBus.$emit(event, payload);
        }
    }
});

В моем компоненте у меня есть прослушиватель для глобального события:

data() {
    return {
        someKey: false //this value is dynamic
    }
}
mounted() {
    EventBus.$on('event1', (event) => {
        console.log(event); //returns undefined
        if(this.someKey) {
             window.location = "/another-url"; 
             //Go to this url ONLY if the is true, else go to the url from the action attibute of the form
        }
    });
}

Таким образом, в принципе, если определенное условие выполняется vue, я хочу загрузить эту страницу.

RightТеперь страница будет загружать URL-адрес из HTML-формы, даже если условие в vuejs соответствует или нет.

Я попытался @ click.prevent = "emitEvent ('event1')" вместо @click, но в этомКстати, если условие ложно, а window.location не запускается, он застревает.

Я думаю получить доступ к объекту события, а затем вручную предотвратитьDefault (), но только если это необходимо, так что если это не такВ этом случае страница будет загружать URL из действия формы, но я не могу найти способ получить этот объект события внутри Vue.

Я обнаружил, что имя события находится в EventBus._events.event1, ноЯ не могу идти вперед, потому что есть только пустыеу свойств, и я не уверен, что я могу получить доступ к событию по умолчанию, чтобы предотвратить его.

Я уверен, что это должен быть более простой / короткий и лучший способ, чем присвоение идентификатора / класса каждомуформы, затем получите к нему доступ, затем получите его атрибут действия, который является URL-адресом, который мне нужен, и, наконец, если получите доступ к этому URL-адресу, если условие не выполняется.Таким образом, это может работать, но, возможно, это старый стиль?

В любом случае, я здесь, и я ценю любую помощь.

Answer 1

Ваша ошибка в @click -листе, ваш звонок:

emitEvent('event1')

вызывает функцию с ОДНЫМ параметром, поэтому ваш event -парам в вашей функции всегда будет 'event1' типа 'string'.

Чтобы ответить на ваш вопрос, вы должны изменить свой @ click-listener на:

@click="(e) => { emitEvent(e, 'event1') }"

Пояснение:

Когда @ click-listener получает значение function, оно вызывает функцию с event в качестве первого (и единственного) параметра. В вашем случае вы даете @ click-listener undefined, поскольку у вас нет возвращаемого значения.

Здесь более подробно рассмотрим этот документ.

Answer 2

Я бы пошел по этому пути (как обычно):

<form method="post" action="/route1" @submit="emitEvent('event1')">
    ...
    <button type="submit">
</form>

Таким образом, событие submit будет подчиняться предупреждениям. А потом:

var that = this; // added a buffer to use in the event (hackish)
EventBus.$on('event1', (event) => {
    if(that.someKey) {
         window.location = "/another-url";     
         return false; // will prevent submission and change the url
    }
    return true; // will proceed submission
});