如何解决验证错误后将重点放在使用Livewire和AlpineJs的Laravel项目上
您好,我需要专注于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()函数。 谢谢您的帮助
解决方法
解决了自己
<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数据对象中,它可以正常工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。