Можно ли слушать события в DOM с Laravel и VueJS?

Question

Я пытаюсь создать событие из моего 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 не чувствительны к регистру, и вы не можете использовать v-on для прослушивания событий camelCase при использовании шаблонов в DOM. Вы, вероятно, должны использовать «address-сохраненный» вместо «addressSaved».

Я назвал его адрес-сохраненным, но он тоже не сработал.

Answer 1

Проблемы

Есть несколько причин, по которым это не сработает.

Обратите внимание, что атрибуты HTML не чувствительны к регистру, и вы не можете использовать v-on для прослушивания к событиям camelCase при использовании шаблонов в DOM.

Как свидетельствует ошибка, нельзя использовать заглавные буквы в именах событий, поскольку 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 будет оценена на сервере, а возвращаемое значение - это то, что отправлено в браузер, поэтому вам нужно будет указать blade-сервер, чтобы он отобразил это значение, а затем вам также нужно будет обернуть это в кавычках.

К сожалению, это тоже не поможет, поскольку у вас нет доступа к window объекту в HTML слушателе событий.

---

Решения

Есть несколько альтернатив, которые вы можете попробовать.

Во-первых, вы можете просто передать URL-адрес компоненту в качестве реквизита, а затем сделать так, чтобы компонент обрабатывал перенаправление.

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>