JS修改输入值后Livewire绑定属性未同步更新问题

Livewire的wire:model双向绑定机制，依赖监听输入元素的原生DOM事件（input/change等）实现前端到后端的值同步。直接通过原生JavaScript修改input.value的操作，不会自动触发浏览器的这些原生事件，Livewire无法感知到输入值已经发生变更，既不会同步更新后端组件的$test属性，也不会触发updatedTest生命周期钩子，最终提交时拿到的还是组件初始化时的旧值。

根据使用场景选以下任意一种方案即可：

• 手动触发原生输入事件
  修改JS赋值逻辑，给输入框赋值后手动派发冒泡的input事件，让Livewire正常捕获值变更：

  const button = document.getElementById('ok');
  button.addEventListener('click', function() {
      const input = document.getElementById('test');
      input.value = "Test";
      // 注意必须配置bubbles:true让事件可以向上冒泡被Livewire捕获
      input.dispatchEvent(new Event('input', { bubbles: true }));
  });
  

• 调用Livewire前端API更新属性
  不直接操作DOM修改输入值，直接通过Livewire暴露的前端方法更新组件属性，框架会自动同步DOM和后端值，不会出现不同步问题：

  const button = document.getElementById('ok');
  button.addEventListener('click', function() {
      // 单组件场景可以直接取第一个实例，多组件场景用Livewire.find(组件ID)定位
      Livewire.first().set('test', 'Test');
  });
  

• Livewire 3版本可直接使用$wire代理
  Livewire 3默认在组件视图内注入了$wire代理对象，可以直接操作组件属性，写法更简洁：

  const button = document.getElementById('ok');
  button.addEventListener('click', function() {
      $wire.test = 'Test';
  });
  

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