Form Submit button not working while implementing if statement logic

Question

I'm trying to implement submit button logic with a simple empty strings input validation, but after clicking the button the whole window gets epty. While conforming to the if statement one block needs to be displayed.

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

Looks like you just didn't register your FinalStep component:

[Vue warn]: Failed to resolve component: FinalStep If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at

When I add it in App.vue, it seems to work:

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