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

Question

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

Answer 1

也许您应该使用v-model、compulated或@input来监听事件并更改按钮禁用状态。

Answer 2

最简单的解决方案是使用计算值来设置按钮的禁用状态 - 基于输入值 - 如果有任何为空，则按钮被禁用

这是一个基本示例

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 1: 

  Input 2: 

  Input 3: 

  Click me

Answer 3

。。。。测试