[Vue warn]: Unknown custom element: <Document>

Question

I'm trying to create a component in Vuejs where the user will input his/her organization and pass that data to my view file.

But here's what I got:

[Vue warn]: Unknown custom element: <Document>

Here is my component file where the user will input his organization.

<template>
  <v-card class="mb-12">
    <div class="px-7">
      <Document :organization="organization"></Document>
      <v-text-field label="Organization" filled></v-text-field>
    </div>
  </v-card>
</template>

<script>
import Document from "../views/vDocument";
export default {
  components: {
    Document
  },
  data() {
    return {
      organization: "Vincent"
    };
  }
};
</script>

This is my view file where I will insert the data to database coming from that component:

  <template>
  <section>
    <v-card class="px-5 py-5">
      <v-card-title class="display-2 my-3">On-Campus Student Activity Application Form</v-card-title>
      <v-card-subtitle>Please fill up these with correct information to assess your proposal</v-card-subtitle>
      <v-stepper v-model="e1">
        <v-stepper-header>
          <v-stepper-step :complete="e1 > 1" editable step="1">Step 1</v-stepper-step>
        </v-stepper-header>

        <v-stepper-items>
          <v-stepper-content step="1">
            {{ organization }}
            <compStepper1></compStepper1>
            <v-card-actions>
              <v-btn>SUBMIT</v-btn>
            </v-card-actions>
          </v-stepper-content>
        </v-stepper-items>
      </v-stepper>
    </v-card>
  </section>
</template>

<script>
import compStepper1 from "../components/compStepper1";
export default {
  components: {
    compStepper1
  },
  props: ["organization"],
  data() {
    return {
      e1: 0
    };
  }
};
</script>

Answer 1

所以，在Vue组件中以非大写字母开头，就像html标签一样，即使你把它作为Document导入，你也应该将它作为文档使用，尝试使用

<document>