是否可以使用Laravel和VueJS收听DOM中的事件？

我正试图从Vue组件发出事件。事件发出后，我想用Javascript或PHP进行重定向。我这样试过：

AddressForm.vue

this.$emit('addressSaved')

create.blade.php

<address-form
    context="create"
    @addressSaved="window.location.assign(route('customer.address.index'))"
></address-form>

我收到一个控制台警告：

事件“addresssaved”在[…]/AddressForm.vue的组件中发出，但处理程序已注册为“addresssaved”。请注意，HTML属性不区分大小写，在DOM模板中使用时，不能使用v-on侦听camelCase事件。您可能应该使用“地址保存”而不是“地址保存”

我已将其命名为address saved，但也不起作用。

问题 这不起作用的原因有几个

请注意，HTML属性不区分大小写，在DOM模板中使用时，不能使用v-on侦听camelCase事件

正如错误所提示的，您不能将大写字母用于事件名称，因为HTML属性不区分大小写

解决这个问题的一种方法是使用

kabab案例

this.$emit('address-saved');

应该是：

window.location.assign('{{ route('customer.address.index') }}') 

这是因为

route

功能将在服务器上进行评估，返回的值是发送到浏览器的值，因此您需要告诉blade回显该值，然后还需要将其括在引号中

不幸的是，这也不会有帮助，因为您无法访问HTML事件侦听器中的

窗口

对象

---

解决 你可以尝试几种选择

首先，您可以简单地将url作为道具传递给组件，然后让组件处理重定向

HTML

<address-form
    context="create"
    redirect-on-save-url="{{ route('customer.address.index') }}"
></address-form>

最后，您可以使用以下内容代替

$emit

：

window.location.assign（this.redirectOnSaveUrl）

---

或者，您可以尝试将自己的

$redirect

方法添加到Vue：

Vue.prototype.$redirect = function (url) {
    window.location.assign(url);
};

那么您的HTML可以是：

<address-form
    context="create"
    @address-saved="$redirect('{{ route('customer.address.index') }}')"
></address-form>

---

您是否尝试将您的活动放在v-on中

<address-form
    context="create"
    v-on="{
        addressSaved: function(){ 
           window.location.assign(route('customer.address.index'))
        }
    }"
/>

route

在这里也无法解析…这是一个laravel函数，不是javascript。@OhGod为什么在刀片文件中使用

route

函数，所以应该可以。谢谢，这很有帮助。顺便说一句，我正在使用Tighenco Zigy，所以我也可以在Javascript中使用route函数。忘了提那件事了

Vue.prototype.$redirect = function (url) {
    window.location.assign(url);
};

<address-form
    context="create"
    @address-saved="$redirect('{{ route('customer.address.index') }}')"
></address-form>

<address-form
    context="create"
    v-on="{
        addressSaved: function(){ 
           window.location.assign(route('customer.address.index'))
        }
    }"
/>