Vue - один компонент файла не отображается

Question

У меня есть небольшое приложение, которое будет включать в себя несколько похожих форм. Чтобы не писать одно и то же много раз, я пытался разбить шаблон формы на другой файл. По некоторым причинам это не оказывает. Я пытался написать это немного по-другому, но пока не нашел правильного пути.

Добавить. vue (страница, где я хочу показать форму)

<template>
  <div>
    <basicform/> 
  </div>
</template>
<script>
import basicform from './basicform.vue';

export default {
  name: "Add",
  components: {
     basicform
  },

};
</script>

basicform. vue

<template>
  <b-form @submit="submitForm" @reset="resetForm">
    <b-form-group label="Record name:">
      <b-form-input v-model="form.name"></b-form-input>
    </b-form-group>
    <b-form-group label="Year:">
      <b-form-input v-model="form.year"></b-form-input>
    </b-form-group>
    <b-form-group label="Artist:">
      <b-form-input v-model="form.artist"></b-form-input>
    </b-form-group>
    <b-button type="submit" variant="primary">Submit</b-button>
    <b-button type="reset" variant="danger">Reset</b-button>
  </b-form>
</template>

<script>
const basicform = {
  name: basicform,
  data: {
    form: {
      name: "",
      year: "",
      artist: ""
    }
  },
  methods: {
    submitForm(evt) {
      evt.preventDefault();
      //Functionality for form post
    },
    resetForm(evt) {
      evt.preventDefault();
      //functionality for form reset
    }
  }
};
export default basicform;
</script>

Answer 1

Значение имени компонента должно быть строкой name: "basicform":

const basicform = {
  name: "basicform",
  data: {
    form: {
      name: "",
      year: "",
      artist: ""
    }
  },
  methods: {
    submitForm(evt) {
      evt.preventDefault();
      //Functionality for form post
    },
    resetForm(evt) {
      evt.preventDefault();
      //functionality for form reset
    }
  }
};
export default basicform;

Это приводит к ошибке

basicform не определена

Answer 2

Ах, я исправил это. Я неправильно определил данные, это правильный путь:

data () {
    return {
    form: {
      name: "",
      year: "",
      artist: ""
    }}

Спасибо за ответы в любом случае!

Answer 3

Визуализация компонента с использованием <basicform></basicform> вместо использования самозавершающегося тега (<basicform />).