在 Livewire 组件中使用 MathJax - 格式化程序不适用于后续的 Livewire 请求

Question

概述： 我正在尝试在我的 livewire 组件中使用 MathJax 来格式化数学问题。在发出 Livewire 请求之前它工作正常。

我做了什么：

我已将以下内容添加到我的布局文件中：

   <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

我的 Livewire 组件：

class ShowMathProblemPage extends Component
{
    public string $problem = '$$4^2 + 4/6$$';

    public function generateNewProblem()
    {
        $this->problem = '$$5/534^56$$';
    }

}

带电刀片：

<div>
    {{ $problem }}
    <button wire:click="generateNewProblem">
        New Problem
     </button>
</div>

问题： 它在初始加载时工作 - 但一旦对

generateNewProblem

（或其他任何东西）进行 livewire 调用，格式化程序就不会重新应用。

我尝试使用以下（和变体）来触发格式化程序在没有骰子的情况下再次运行：

<script>
    document.addEventListener("DOMContentLoaded", () => {
        Livewire.on('run-formatter', () => {
            MathJax.typesetPromise().then(() => {
                MathJax.typesetPromise();
            }).catch((err) => console.log(err.message));
        });

    });
</script>

Answer 1

这是一个可能的解决方案：

public function generateNewProblem()
{
    $this->problem = '$$5/534^56$$';
    $this->dispatch('run-formatter');
}

<div @run-formatter.window="$nextTick(() => MathJax.typeset())">

    {{ $problem }}

    <button wire:click="generateNewProblem">
        New Problem
    </button>

</div>

该事件由要格式化的元素的容器捕获，使用 $nextTick() 在 dom 更新后调用格式化