点击te7a-houdini/laravel-trix样式按钮时修改内容未同步生效如何解决

Trix编辑器的样式操作（加粗、段落格式调整等）不会触发常规的input事件，只会触发Trix自定义的trix-change事件，加上你对wire:model设置了1000ms防抖，且编辑器外层加了wire:ignore标识，Livewire默认无法监听到这类自定义事件触发的内容变更，因此不会同步更新form.content变量。

方案1：实时自动同步（推荐） #

借助Alpine.js监听Trix的自定义trix-change事件，内容发生任何变更时主动同步到Livewire变量，修改你的模板代码如下：

<div class="p-2 w-full">
    <div class="body-content" wire:ignore>
        <trix-editor
            class="trix-content"
            x-ref="trix"
            wire:key="trix-content-unique-key"
            x-on:trix-change="$wire.set('form.content', $refs.trix.value, {debounce: 1000})"
        ></trix-editor>
    </div>
    <x-jet-input-error for="form.content" class="mt-2"/>
</div>

说明：$wire.set的第三个参数可配置防抖时长，和你原需求的1000ms防抖逻辑一致，无需再额外配置wire:model的防抖属性。

方案2：表单提交时手动同步 #

如果不需要实时同步，可在表单提交触发时先手动获取Trix编辑器内容赋值给form.content再执行提交逻辑，示例代码如下：
给提交按钮添加事件监听即可：

<button type="button" x-on:click="
    $wire.set('form.content', $refs.trix.value);
    $wire.submit();
">提交表单</button>

如果你的提交逻辑是Livewire原生方法调用，在调用提交方法前先执行上述变量赋值操作即可。

内容的提问来源于stack exchange，提问作者mstdmstd