Alpine $dispatch 事件未触发（或未收听）答案

【问题标题】：Alpine $dispatch event not firing (or not listened to)Alpine $dispatch 事件未触发（或未收听）
【发布时间】：2022-07-05 06:51:34
【问题描述】：

我编写了一个实现Suneditor 的简单组件。它应该在另一个 livewire 组件的上下文中使用。
问题是，在输入之后，我会假设要触发输入事件并且要更新 $content 变量。但这并没有发生。

编辑器组件：
editor.php

<?php

namespace App\View\Components\inputs;

use Illuminate\View\Component;
use Str;

class editor extends Component
{
    public $componentKey;
    public $initialContent;
    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct($initialContent)
    {
        $this->componentKey = Str::random();
        $this->initialContent = $initialContent;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|\Closure|string
     */
    public function render()
    {
        return view('components.inputs.editor');
    }
}

editor.blade.php

    <div class="z-0" wire:key="{{ Str::random() }}" wire:ignore x-data="{
                            value: '{{$initialContent}}',
                            init() {
                                var parent = this;
                                const editor = SUNEDITOR.create(($refs.{{ 'edit'.$componentKey }}),{
                                        imageUploadHeader: {'X-CSRF-TOKEN': document.head.querySelector('meta[name=csrf-token]').content},
                                        imageUploadUrl: '/bild-speichern',
                                        lang: SUNEDITOR_LANG['en'],
                                        'minHeight': '250px',
                                        width: '100%',
                                        buttonList: [
                                            ['undo', 'redo'],
                                            ['formatBlock'],
                                            ['paragraphStyle', 'blockquote'],
                                            ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
                                            ['fontColor', 'hiliteColor'],
                                            '/', // Line break
                                            ['outdent', 'indent'],
                                            ['align', 'horizontalRule', 'list'],
                                            ['table', 'link', 'image' /** ,'math' */],
                                            ['video'],
                                            ['fontSize', 'font', 'codeView', 'removeFormat']
                                            ]
                                    });

                                    editor.onChange = contents => {
                                        parent.value = contents;
                                        $dispatch('input', contents); // This doesn't seem to work. 
                                        alert('TEST'); // This one works
                            }
                 }
             }">
        <textarea class="w-full" x-ref="{{ 'edit'.$componentKey }}">{!! $initialContent !!}</textarea>
    </div>

周边组件（部分）
text-block-component.blade.php

<x-inputs.editor wire:model="content" :initial-content="$content" wire:key="{{ Str::random() }}"/>

TextBlockComponent.php（部分）

    public $content = "";
    public function updated()
    {
        echo(""); // Just for the debugger to see if the event gets to the surrounding component
    }

【问题讨论】：

标签： laravel laravel-8 alpine.js

【解决方案1】：

您正在创建一个 Alpine.js 组件，因此您必须使用 this context（或您创建的 parent 别名）来访问魔术属性，例如 $dispatch：

this.$dispatch('input', contents)

【讨论】：

试试这个，我得到this.$dispatch is not a function。其实我不明白，为什么我在这里需要this。我只是按照示例laravel-livewire.com/docs/2.x/… this 没有使用那里。不使用它我没有收到任何错误，它只是（似乎）什么都不做。

【解决方案2】：

如果有人也偶然发现了这个问题：
问题只是一个被遗忘的{{$attributes}} somewhere inside the div of the blade file。

    <div 
{{$attributes}} // <--- was missing!
class="z-0" wire:key="{{ Str::random() }}" wire:ignore x-data="{
                            value: '{{$initialContent}}',
                            init() {
                                var parent = this;
                                const editor = SUNEDITOR.create(($refs.{{ 'edit'.$componentKey }}),{
                                        imageUploadHeader: {'X-CSRF-TOKEN': document.head.querySelector('meta[name=csrf-token]').content},
                                        imageUploadUrl: '/bild-speichern',
                                        lang: SUNEDITOR_LANG['en'],
                                        'minHeight': '250px',
                                        width: '100%',
                                        buttonList: [
                                            ['undo', 'redo'],
                                            ['formatBlock'],
                                            ['paragraphStyle', 'blockquote'],
                                            ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
                                            ['fontColor', 'hiliteColor'],
                                            '/', // Line break
                                            ['outdent', 'indent'],
                                            ['align', 'horizontalRule', 'list'],
                                            ['table', 'link', 'image' /** ,'math' */],
                                            ['video'],
                                            ['fontSize', 'font', 'codeView', 'removeFormat']
                                            ]
                                    });

                                    editor.onChange = contents => {
                                        parent.value = contents;
                                        $dispatch('input', contents); // This doesn't seem to work. 
                                        alert('TEST'); // This one works
                            }
                 }
             }">
        <textarea class="w-full" x-ref="{{ 'edit'.$componentKey }}">{!! $initialContent !!}</textarea>
    </div>

【讨论】：