实现 if 语句逻辑时，表单提交按钮不起作用

Question

我试图通过简单的空字符串输入验证来实现提交按钮逻辑，但是单击按钮后整个窗口变得空了。在符合if语句的同时，需要显示一个块。

https://codesandbox.io/s/intelligent-jasper-teh1im?file=/src/components/Button.vue

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

<script>
export default {
  inject: [
    "firstName",
    "lastName",
    "paymentAmount",
    "accountNumber",
    "isFinalStep",
  ],
  data() {
    return {
      firstName: this.firstName,
      lastName: this.lastName,
      paymentAmount: this.paymentAmount,
      accountNumber: this.accountNumber,
    };
  },
  methods: {
    submit() {
      if (
        !this.firstName &&
        !this.lastName &&
        !this.paymentAmount &&
        !this.accountNumber
      ) {
        this.isFinalStep();
      } else {
        alert("please fill the required fields");
      }
    },
  },
};

Answer 1

看起来您只是没有注册您的

FinalStep

组件：

[Vue warn]：无法解析组件：FinalStep 如果这是本机自定义元素，请确保通过compilerOptions.isCustomElement 将其从组件解析中排除。 在

当我将其添加到 App.vue 中时，它似乎可以工作：

import Form from "./components/Form.vue";
import FinalStep from "./components/FinalStep.vue";
...
export default {
  name: "App",
  ...
  components: {
    Form,
    ProgressBar,
    FinalStep
  },