Vue 3 Composition API - 在满足所有条件之前禁用表单提交按钮

Question

我想禁用我的表单提交按钮，直到所有输入字段都已填写并且没有错误。

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

该按钮默认情况下处于禁用状态，但一旦满足已经提到的条件，它不会 'enable' 自身。

到目前为止，我使用的是辅助生命周期挂钩 nextTick()，在这种情况下显然对我没有帮助。

'disabled' 状态将在控制台中更新，但不会在 DOM 上更新。

我该如何处理？

干杯

Answer 1

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

Answer 2

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

这是一个基本示例

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

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  Input 1: <input v-model="input1" type="text"/><br/>
  Input 2: <input v-model="input2" type="text"/><br/>
  Input 3: <input v-model="input3" type="text"/><br/>
  <button :disabled="disabled" @click="clicked">Click me</button>
</div>

Vue 3 Composition API - 在满足所有条件之前禁用表单提交按钮

Vue 3 Composition API - Disabling form submit button until all conditions are met

javascript

vue.js