Vue 3 Composition API - 停用表單提交按鈕,直到滿足所有條件
P粉360266095
P粉360266095 2023-11-13 09:41:53

我想要停用表單提交按鈕,直到所有輸入欄位都已填寫且沒有錯誤。

<button
  :disabled="disabled"
  type="submit"
  value="Submit"
  >
  Suggest
</button>

let disabled = ref(true);
let error = ref(false);

nextTick(() => {
  let inputs = Array.from(document.getElementsByClassName("form__input"));
  if (!error.value) {
    inputs.forEach((input) => {
      if (input.value === "") {
        disabled.value = true;
      } else {
        disabled.value = false;
      }
    });
  }
})

該按鈕預設為停用狀態,但一旦滿足已經提到的條件,它就不會自行「啟用」。

到目前為止,我正在使用輔助生命週期掛鉤 nextTick() ,這顯然在這種情況下對我沒有幫助。

「停用」狀態將在控制台中更新,但不會在 DOM 上更新。

我該如何解決這個問題?

乾杯

P粉360266095
P粉360266095

全部回覆(3)
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!