如何在Livewire验证失败后重新初始化组件上的JS插件？

我之前也碰到过类似的Livewire钩子触发时机的坑，你的情况核心问题在于element.initialized钩子的触发逻辑——它只会在元素首次被Livewire初始化创建时触发，第二次验证失败后，Livewire会优化渲染流程，大概率是更新已有textarea的内容/属性而非重新创建元素，所以钩子就不再生效了。

给你两个亲测有效的解决方案：

方案一：监听Livewire全局的message.processed事件 #

每次Livewire处理完后台返回的消息（包括验证失败的响应）后，都会触发这个事件，此时页面已经完成重新渲染，刚好适合重新初始化插件：

先把初始化逻辑封装成可复用的函数，同时加上清理旧行号的逻辑（避免重复初始化导致的插件冲突）：

function initLineNumbers() {
  // 先清理已存在的行号容器（适配TLN插件的DOM结构）
  const textarea = document.getElementById('results-textarea');
  const existingLineContainer = textarea.previousElementSibling;
  if (existingLineContainer?.classList.contains('tln-container')) {
    existingLineContainer.remove();
  }
  // 重新初始化行号插件
  TLN.append_line_numbers('results-textarea');
}

document.addEventListener('livewire:load', function() {
  // 页面首次加载时初始化
  initLineNumbers();
  
  // 每次Livewire处理完消息后重新初始化
  Livewire.hook('message.processed', (message, component) => {
    initLineNumbers();
  });
});

方案二：针对目标元素使用element.updated钩子 #

如果只想监听目标textarea的更新事件，可以用这个钩子精准触发：

function initLineNumbers() {
  const textarea = document.getElementById('results-textarea');
  const existingLineContainer = textarea.previousElementSibling;
  if (existingLineContainer?.classList.contains('tln-container')) {
    existingLineContainer.remove();
  }
  TLN.append_line_numbers('results-textarea');
}

document.addEventListener('livewire:load', function() {
  initLineNumbers();
  
  Livewire.hook('element.updated', (el, component) => {
    // 仅对目标textarea执行初始化
    if (el.id === 'results-textarea') {
      initLineNumbers();
    }
  });
});

补充说明 #

添加清理旧行号的逻辑非常关键——如果TLN插件没有处理重复初始化的逻辑，多次调用append_line_numbers会导致行号容器重复叠加，最终插件无法正常工作。

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