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
        }
    });
}

因此，基本上，如果满足某些条件，我想加载该页面。

现在，即使满足vuejs中的条件，页面也会从html表单中加载url。

我尝试使用@ click.prevent =“ emitEvent（'event1'）”而不是@click，但是通过这种方式，如果条件为false并且window.location没有运行，则会卡住。

我正在考虑访问事件对象，然后手动阻止Default（），但是仅在必要时才这样做，因此，如果不是这种情况，则该页面将从表单的操作中加载url，但是我找不到一种获取方法Vue中的那个事件对象。

我发现事件名称在EventBus._events.event1中，但是我无法前进，因为只有空属性，我不确定如何可以访问默认事件，因此我可以防止它发生。

>

我敢肯定，一定要有一种更容易/更短/更好的方法，然后为每个表单提供一个id / class，然后访问它，然后获取其action属性，即我需要的url，最后，如果访问该url，条件不符合。这样可能有效，但是可能是旧样式吗？

无论如何，我在这里很忙，感谢您的帮助。

Answer 1

我会像往常一样走这种方式：

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

这样，提交事件将遵守预防措施。然后：

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
});

Answer 2

您的错误是在@click-监听器中，您的通话是

emitEvent('event1')

调用具有一个参数的函数，因此函数中的event参数将始终是'string'类型的'event1'。

要回答您的问题，您必须将@ click-listener更改为：

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

说明：

当@ click-listener获得function作为值时，它将调用以event作为第一个（也是唯一一个）参数的函数。在您的情况下，您给@ click-listener一个undefined，因为您没有返回值。

在这里仔细查看this doc.

从VueJS中的全局事件总线访问事件对象

2 个答案: