实现if语句逻辑时表单提交按钮异常：点击后页面空白

问题根源 #

1. 响应式丢失：你在data中重新定义了与inject同名的属性，覆盖了注入的响应式属性，变成了初始化时的静态值。后续输入框的内容变化不会同步到组件内的this.firstName等属性，导致验证逻辑永远基于初始空值判断。
2. 验证逻辑反转：当前if条件是所有字段都为空时调用isFinalStep()，但实际需求应该是所有必填字段填写完成才进入下一步，逻辑完全写反了。
3. 窗口空白是因为每次点击按钮都会触发isFinalStep()（验证条件永远为真），而该方法的执行可能错误移除了当前页面内容或切换到无内容的页面。

修复代码 #

修改后的Button.vue代码如下：

<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("please fill the required fields");
      }
    },
  },
};
</script>

额外说明 #

• 如果部分字段是数字类型（比如paymentAmount），空字符串或0需要单独处理，可根据需求调整判断条件，比如this.paymentAmount !== "" && this.paymentAmount !== null。
• 检查isFinalStep方法的实现，确保它能正确切换到目标模块，而非错误清空页面内容。

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