API de composition Vue 3 - désactivez le bouton d'envoi du formulaire jusqu'à ce que toutes les conditions soient remplies

Question

Je souhaite désactiver le bouton d'envoi du formulaire jusqu'à ce que tous les champs de saisie soient remplis et qu'il n'y ait aucune erreur.

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

Le bouton est désactivé par défaut, mais il ne « s'activera » pas de lui-même une fois les conditions déjà mentionnées remplies.

Jusqu'à présent, j'utilise des hooks de cycle de vie assistés nextTick(), ce qui ne m'aide évidemment pas dans ce cas.

L'état "désactivé" sera mis à jour dans la console, mais pas sur le DOM.

Comment puis-je résoudre ce problème ?

Bravo

Answer 1

Vous devriez peut-être utiliser v-model、compulated或@input pour écouter les événements et modifier l'état du bouton désactivé.

Answer 2

La solution la plus simple consiste à utiliser la valeur 计算 pour définir l'état désactivé du bouton - en fonction de la valeur d'entrée - si certains sont vides, le bouton est désactivé

Ceci est un exemple basique

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

. . . . Testez