[Vue警告]:未知的自定义元素:<Document>

时间:2019-12-03 12:42:56

标签: javascript vue.js vuejs2 vue-component

我正在尝试在Vuejs中创建一个组件,用户将在其中输入他/她的组织并将该数据传递到我的视图文件中。

但这是我得到的:

  

[Vue警告]:未知的自定义元素:

这是我的组件文件,用户将在其中输入其组织。

<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>

这是我的视图文件,我将在其中将来自该组件的数据插入数据库:

  <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>

1 个答案:

答案 0 :(得分:0)

因此,在Vue组件中,与html标签一样,它们以非大写字母开头,即使您将其导入为文档,也应将其用作文档,并尝试使用

<document>