【Vue.js】フォームをコンポーネント化したら表示されなくなった

Question

概要

現在、作成したnew.vueとedit.vueでフォームの部分が似ているので、共通化して、コンポーネント化したいと考えています。
そこで、新たに、form.vueを作成して、それを呼び出す形でページを表示したいと考えています。

しかし、コンポーネント化した際に、ページが表示されなくなってしまいました。
（ログにもそれらしき記述はなく、Consoleにもエラー表示がない）

データの受け渡しがうまくいっていないものと思いますが、どこを修正したらよいかわかりかねます。

修正方法について、ご教示いただければ幸いです。

コンポーネント化する前のもとのコード

New.vue

<template>
  <main>
    <form>
      <section>
        <div>
          <div>
            <fieldset>
              <div class="form-row">
                <div class="form-group col-3">
                  <label>タイトル</label>
                  <input v-model="latest_information.title" type="text">
                </div>
                <div class="form-group col-3">
                  <label>詳細</label>
                  <input v-model="latest_information.detail" type="text">
                </div>
              </div>
            </fieldset>
          </div>
        </div>
      </section>
      <div class="btn-container d-flex justify-content-center">
        <button class="button-square btn-send" type="button" @click="createLatestInformation">保存する</button>
      </div>
    </form>
  </main>
</template>

<script>

export default {
  data() {
    return {
      latest_information: {
        title: '',
        detail: '',
      },
    }
  },
  methods: {
    createLatestInformation() {
      this.$loading.load(this.$auth.api.post('admin/latest_informations/', {
        latest_information: this.latest_information
      })
      .then(response => {
        this.$router.push({name: 'AdminLatestInformationIndex'})
      }))}
  },
}
</script>

コンポーネント化をしたあとのコード（うまく挙動していない）

New.vue

<template>
  <form :latest_information="latest_information" @click="createLatestInformation"></form>
</template>

<script>
import Form from './Form.vue';

export default {
  components:{
    Form
  },

  data() {
    return {
      latest_information: {
        title: '',
        detail: '',
      },
    }
  },
  methods: {
    createLatestInformation() {
      this.$loading.load(this.$auth.api.post('admin/latest_informations/', {
        latest_information: this.latest_information
      })
      .then(response => {
        this.$router.push({name: 'AdminLatestInformationIndex'})
      }))}
  },
}
</script>

Form.vue

<template>
  <main>
    <form>
      <section>
        <div>
          <div>
            <fieldset>
              <div class="form-row">
                <div class="form-group col-3">
                  <label>タイトル</label>
                  <input v-model="latest_information.title" type="text">
                </div>
                <div class="form-group col-3">
                  <label>詳細</label>
                  <input v-model="latest_information.detail" type="text">
                </div>
              </div>
            </fieldset>
          </div>
        </div>
      </section>
      <div class="btn-container d-flex justify-content-center">
        <button class="button-square btn-send" type="button" @click="$emit('click')">保存する</button>
      </div>
    </form>
  </main>
</template>

<script>
export default {
  props: {
    latest_information: {
      title: '',
      detail: '',
    },
  }
}
</script>

<style>
</style>

環境

rails 6系
vue@2.6.10

Answer 1

formは予約語なのでテンプレート名に使ってはいけません（formタグとの区別ができないので）。なので、tformなどという名前に変えて対処しましょう。

<template>
  <tform :latest_information="latest_information" @click="createLatestInformation"></tform>
</template>

<script>
import Form from './Form.vue';

export default {
  components:{
    'tform':Form
  },

Comments

[katahik]

ご提示いただいたとおり予約語を使ってしまっていたため、修正したところ、無事正常な挙動を確認しました。本当にありがとうございました。