Vue 3 Composition API - 停用表單提交按鈕，直到滿足所有條件

Question

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

<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 上更新。

我該如何解決這個問題？

乾杯

Answer 1

也許您應該使用v-model、compulated或@input來監聽事件並更改按鈕來停用狀態。

Answer 2

最簡單的解決方案是使用計算值來設定按鈕的停用狀態 - 基於輸入值 - 如果有任何為空，則按鈕被停用

這是一個基本範例

const { ref, createApp, computed } = Vue;
createApp({
    setup() {
        const input1 = ref("");
        const input2 = ref("");
        const input3 = ref("");
        // disabled is true if ANY input is empty string
        const disabled = computed(() => !input1.value || !input2.value || !input3.value);
        const clicked = () => console.log('clicked');
        return { input1, input2, input3, disabled, clicked };
    }
}).mount('#app');

sssccc

  Input 1: 

  Input 2: 

  Input 3: 

  Click me

Answer 3

。 。 。 。測試