使用 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 組件，然后我想觸發 focusField() 函數，如果 errorBag 屬性僅在每次提交表單無效的字段時才更改為焦點。 謝謝你的幫助

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 對象中它工作得很好。