Ich möchte die Schaltfläche zum Senden des Formulars deaktivieren, bis alle Eingabefelder ausgefüllt sind und keine Fehler mehr vorliegen.
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; } }); } })
Die Schaltfläche ist standardmäßig deaktiviert, sie wird sich jedoch nicht selbst „aktivieren“, sobald die bereits genannten Bedingungen erfüllt sind.
Bisher verwende ich Assisted Lifecycle HooksnextTick(), was mir in diesem Fall offensichtlich nicht hilft.
Der Status „deaktiviert“ wird in der Konsole aktualisiert, jedoch nicht im DOM.
Wie kann ich dieses Problem lösen?
Prost
也许您应该使用
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');Input 2:
Input 3:
。。。。测试