Vue.js实现按钮禁用：需完成所有输入字段后启用

问题分析 #

你当前的核心问题在于按钮禁用逻辑的反转错误，同时需要确认reactive store的响应式追踪是否正常，导致按钮状态无法随表单输入动态变化。

修复步骤 #

1. 修正按钮绑定的逻辑反转 #

你的按钮绑定了:disabled="!disableButton"，但计算属性disableButton返回的正是「存在未填项/验证失败」的布尔值，这导致逻辑完全颠倒：

• 当有必填项未填时，disableButton为true，!disableButton变成false，按钮反而处于启用状态
• 当所有项都符合要求时，disableButton为false，!disableButton变成true，按钮反而被禁用

直接修改按钮的disabled绑定：

<button class="btn btn-primary text-uppercase" id="nextButton" @click.prevent="showNext(2)" :disabled="disableButton">
  Next
</button>

2. 确保reactive store的响应式正常工作 #

• 必须初始化所有字段：Vue的reactive只能追踪初始化时声明的字段，如果后续动态添加字段，不会触发响应式更新。比如你的store必须包含所有用到的属性：

  import { reactive } from 'vue'
  
  const store = reactive({
    name: '',
    surname: '',
    email: '',
    phone: '',
    invalidPhone: false,
    pdv: '',
    desiredDate: '',
    desiredHour: '',
    privacyFlag: false
  })
  

• 禁止解构store字段：如果组件中用const { name } = store解构字段，会丢失响应式，必须直接通过store.name访问。

3. 验证计算属性的逻辑准确性 #

可以在计算属性中添加临时调试代码，确认每个条件的返回值是否符合预期：

computed: {
  disableButton() {
    // 调试用：打印当前各字段状态
    console.log('当前状态:', {
      name: !!this.store.name,
      surname: !!this.store.surname,
      email: !!this.store.email,
      phone: !!this.store.phone,
      invalidPhone: this.store.invalidPhone,
      pdv: !!this.store.pdv,
      desiredDate: !!this.store.desiredDate,
      desiredHour: !!this.store.desiredHour,
      privacyFlag: this.store.privacyFlag
    })
    
    return !this.store.name || 
           !this.store.surname || 
           !this.store.email || 
           !this.store.phone || 
           this.store.invalidPhone || 
           !this.store.pdv || 
           !this.store.desiredDate || 
           !this.store.desiredHour || 
           !this.store.privacyFlag
  }
}

4. 确认表单输入与store的绑定 #

确保所有表单输入框正确使用v-model绑定store字段，比如：

<input type="text" v-model="store.name" placeholder="Name">
<input type="checkbox" v-model="store.privacyFlag">

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