I am currently working on a Vuejs component that allows the user to input their organization and then pass that data to my view file.
However, I encountered the following error:
[Vue warn]: Unknown custom element: <Document>
This is the code for my component file where the user can input their 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>
Here is my view file where I will store the data coming from the component into the database:
<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 out all fields accurately to evaluate 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>
</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>