国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Gemeinschaft

Lernen

Tools-Bibliothek

KI-Tools

Freizeit

Deutsch

Vue 3 Composition API – Schaltfl?che zum Senden des Formulars deaktivieren, bis alle Bedingungen erfüllt sind

P粉360266095 2023-11-13 09:41:53

1419

Ich m?chte die Schaltfl?che zum Senden des Formulars deaktivieren, bis alle Eingabefelder ausgefüllt sind und keine Fehler mehr vorliegen.

<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;
      }
    });
  }
})

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 Hooks nextTick(), 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

P粉360266095

Antworte allen(3)

P粉1808446192023-11-14 00:30:04 3 Etage

也許您應該使用v-model、compulated或@input來監(jiān)聽事件并更改按鈕禁用狀態(tài)。

Wie +0

Antwort hinzufügen

P粉8284636732023-11-14 00:15:17 2 Etage

最簡單的解決方案是使用計算值來設置按鈕的禁用狀態(tài) - 基于輸入值 - 如果有任何為空，則按鈕被禁用

這是一個基本示例

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');