DEV.RULES
Digital agency
327
Livewire

Использование SweetAlert2 с Laravel Livewire

От Святослав Торн, публикация от 28 June, 2020

Сейчас я буду в реальном времени решать свою задачу, у меня есть livewire компонент "вопрос - ответ", и модальное окно для того чтобы пользователь мог задать мне вопрос. После нажатия кнопки отправить форма просто закрывается и мы ни как не уведомили пользователя что вопрос отправлен. Разберемся с этим вопросом.

1. Установим SweetAlert2

Выполним команду

npm install sweetalert2

2. Сборка laravel.mix

В resources/js я создал новый файл sw2.js и добавил туда 

const swal = window.swal = require('sweetalert2');

В файл со стилями resources/sass/app.scss добавил 

@import '~sweetalert2/src/sweetalert2.scss';

В файл webpack.mix.js добавил 

.js("resources/js/sw2.js", "public/js/sw2.js")

Запуск сборки

npm run dev

Теперь сам JS скрипт мы можем подключить именно там где нам это нужно. 

3. Подключение скрипта и проверка его работы

В нужном файле добавим

<script src="{{ asset('js/sw2.js') }}"></script>
<script>
    swal.fire('Any fool can use a computer')
</script>

 4. Добавим вызов события в компоненте Livewire

Для этого после добавления вопроса в базу данных, делаем вызов события:

public function create()
{
// Если все в наличии создаем запись в БД
    if($this->name && $this->question){
        Faq::create([
            'name' => $this->name,
            'question' => $this->question,
        ]);
    }
// Чистим значения свойств
    $this->clean();
// Обновление списка вопросов
    $this->getFaqList();
// Вызов события
    $this->emit('alert', ['type' => 'success', 'message' => 'Вопрос успешно отправлен!']);
}

5. Ловим событие во вью компонента

<script src="{{ asset('js/sw2.js') }}"></script>
<script>
    window.onload = function() {
        window.livewire.on('alert', param => {
            swal.fire({
                icon: param['type'],
                title: param['message'],
                timer: 3000,
                showConfirmButton: false,
            })
        });
    };
</script>

В итоге я добился чего хотел, окошко автоматически закроется через 3 секунды.

Вот такой получился результат