我想要停用表單提交按鈕，直到所有輸入欄位都已填寫且沒有錯誤。
<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 上更新。
我該如何解決這個問題？
乾杯
也許您應該使用
v-model、compulated或@input來監聽事件並更改按鈕來停用狀態。最簡單的解決方案是使用
計算值來設定按鈕的停用狀態 - 基於輸入值 - 如果有任何為空，則按鈕被停用這是一個基本範例
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');。 。 。 。測試