使用if语句实现表单验证时功能失效，点击提交无错误提示

你的表单验证逻辑存在两个关键问题：

1. 条件判断逻辑完全写反 #

当前代码的判断逻辑是所有字段为空时执行isFinalStep()，否则弹出错误提示，这和你需要的「留空时提示错误，填写完整才执行下一步」完全相反。

2. 不必要的数据复制导致响应式失效 #

你把inject进来的响应式属性重新赋值到data中，切断了数据的响应式关联——输入框内容变化时，组件内的firstName等变量不会同步更新，始终保持初始空值，导致判断逻辑永远走isFinalStep()分支。

修正后的代码 #

<template>
  <button class="btn" @click="submit">Submit</button>
</template>

<script>
export default {
  inject: [
    "firstName",
    "lastName",
    "paymentAmount",
    "accountNumber",
    "isFinalStep",
  ],
  methods: {
    submit() {
      // 修正逻辑：所有字段填写完整才执行下一步
      if (this.firstName && this.lastName && this.paymentAmount && this.accountNumber) {
        this.isFinalStep();
      } else {
        alert("请填写所有必填字段");
      }
    },
  },
};
</script>

<style scoped>
.btn {
  padding: 10px 30px;
  margin: 0 auto;
  display: flex;
}
</style>

补充说明 #

• 直接使用inject的属性即可，无需在data中重复声明，这样能保证数据随输入框内容同步更新；
• 条件判断需贴合业务需求：确认所有必填字段有值后，才允许进入下一步，否则提示用户补全。

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