我想要停用表單提交按鈕，直到所有輸入欄位都已填寫且沒(méi)有錯(cuò)誤。
<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;
}
});
}
})
該按鈕預(yù)設(shè)為停用狀態(tài)，但一旦滿足已經(jīng)提到的條件，它就不會(huì)自行「啟用」。
到目前為止，我正在使用輔助生命週期掛鉤 nextTick() ，這顯然在這種情況下對(duì)我沒(méi)有幫助。
「停用」?fàn)顟B(tài)將在控制臺(tái)中更新，但不會(huì)在 DOM 上更新。
我該如何解決這個(gè)問(wèn)題？
乾杯
3
0
0
也許您應(yīng)該使用v-model、compulated或@input來(lái)監(jiān)聽事件並更改按鈕來(lái)停用狀態(tài)。
最簡(jiǎn)單的解決方案是使用計(jì)算值來(lái)設(shè)定按鈕的停用狀態(tài) - 基於輸入值 - 如果有任何為空，則按鈕被停用
這是一個(gè)基本範(fàn)例
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');
ssscccInput 1:
Input 2:
Input 3:
