是否可以使用 Laravel 和 VueJS 监听 DOM 内事件？答案

【问题标题】：Is it possible to listen to in-DOM events with Laravel and VueJS?是否可以使用 Laravel 和 VueJS 监听 DOM 内事件？
【发布时间】：2020-08-06 09:20:21
【问题描述】：

我正在尝试从我的 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 属性不区分大小写，并且在使用 in-DOM 模板时不能使用 v-on 来监听 camelCase 事件。您可能应该使用“address-saved”而不是“addressSaved”。

我已将其命名为地址保存，但它也不起作用。

【问题讨论】：

标签： laravel vue.js

【解决方案1】：

问题

这不起作用有几个原因。

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

正如错误提示，您不能使用大写字母作为事件名称，因为 HTML 属性是 case-insensitive。

解决此问题的一种方法是使用kabab-case，即

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

<address-form
    context="create"
    @address-saved="..."
></address-form>

第二个问题是：

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

应该是：

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

这是因为 route 函数将在服务器上进行评估，返回值是发送到浏览器的值，因此您需要告诉刀片回显该值，然后您还需要将其包装在引号。

很遗憾，这也无济于事，因为您无法访问 HTML 事件侦听器中的 window 对象。

解决方案

您可以尝试一些替代方案。

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

HTML

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

将redirect-on-save-prop 添加到组件中：

props: ['redirect-on-save'],
//or
props: {
    'redirect-on-save': {
        type: String,
        required: true,
    }
},

最后，你可以使用 $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>

【讨论】：

route 在这里也无法解析...这是一个 laravel 函数，而不是 javascript。
@Ohgodwhy route 函数正在刀片文件中使用，所以应该没问题。
谢谢，这有帮助。顺便说一句，我使用的是tightco Ziggy，所以我也可以在 Javascript 中使用路由功能。忘记说了

【解决方案2】：

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

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

【讨论】：