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数据对象中，它可以正常工作。

验证错误后将重点放在使用Livewire和AlpineJs的Laravel项目上

1 个答案: