javascript - 使用 Livewire 和 AlpineJs 在 Laravel 项目上验证错误后聚焦一个字段

Question

您好，我需要关注 ErrorBag 的第一个字段，我正在使用 Livewire 组件表单，并且因为 Livewire 每次输入更改都会发送 XHR 请求以更新 DOM，因此每次都将关注 XHR 响应而不提交表单，这不是我需要的，我我也在同一个项目中使用 Alpine Js，我想用 Javascript 来关注它，但我不知道是否可以观察属性变化。

function app(){

return {

    errorBag: {!! json_encode(array_keys($errors->getMessages())) !!},
    

    focusField()
    {
     if(this.errorBag.length > 0)
      {
        fieldError = Array.from(document.getElementsByName(errorBag[0]));
        fieldError[0].focus({preventScroll:false});
      }
    }
}

}

在示例中，我想用 x-data="app()" 初始化 Alpine 组件，然后如果 errorBag 属性更改为仅在每个表单提交的字段无效时才聚焦，我想触发 focusField() 函数。谢谢你的帮助

Answer 1

自己解决了

          <div
            x-data="
            { 
              'errors': {{ json_encode(array_keys($errors->getMessages())) }},
              focusField(input){
                  fieldError = Array.from(document.getElementsByName(input));
                  if(fieldError.length > 0){
                    fieldError[0].focus({preventScroll:false});
                  }
              },
            }
            "
            x-init="() => { $watch('errors', value => focusField(value[0])) }"
        >
        </div>

函数 app() 中的属性没有更新，但在 x-data 对象中它工作得很好。