Vue3中如何禁用提交按钮直至输入框填写内容？附优化建议

问题根源 #

你的计算属性isDisabled没有返回值，导致它始终是undefined，无法正确控制按钮的禁用状态。

修复与简化方案 #

1. 修正并简化计算属性 #

在父组件的script中，直接返回判断结果，同时处理边界情况（如组件未挂载、输入纯空格）：

const isDisabled = computed(() => {
  // 可选链避免组件未渲染时的报错，trim排除纯空格输入
  return !donationInput.value?.inputValue.trim()
})

2. （可选）优化数字输入的验证 #

如果捐款金额要求是有效正数（不能为0或负数），可以进一步完善判断逻辑：

const isDisabled = computed(() => {
  const inputVal = donationInput.value?.inputValue.trim()
  // 空值、非数字、小于等于0时都禁用按钮
  return !inputVal || isNaN(Number(inputVal)) || Number(inputVal) <= 0
})

3. 优化子组件输入框类型 #

在InputField.vue中，根据number prop动态设置输入框类型，提升用户体验：

input(v-else v-model="inputValue", :type="number ? 'number' : 'text'", ref="input", :name="camelCase" :id="id" :placeholder="placeholder")

效果验证 #

修改后，当donationInput的输入值为空、纯空格，或（启用数字验证时）不是有效正数时，提交按钮会保持禁用状态；一旦输入有效内容，按钮自动启用。

内容的提问来源于stack exchange，提问作者Nick Bewley