LaravelでVueコンポーネントが表示されない

LaravelでのVueコンポーネントの使用を勉強しています。

お問い合わせページにお問い合わせ用コンポーネント（ContactForm）を使用したいのですが、
表示されません。。

bladeで表記しているhr　２本は表示されていますが、その間にフォームを表示させたいのですが出ません。
アドバイスをいただけますと幸いです。

index.blade.php

@extends('app')

@section('title', 'お問合せ')

@section('content')
  @include('nav')
  <div class="container">    
      <hr>
        <ContactForm title="お問い合わせフォーム"></ContactForm>
      <hr>    
  </div>
@endsection

app.js

import './bootstrap'
import Vue from 'vue'
import ArticleLike from './components/ArticleLike'
import ArticleTagsInput from './components/ArticleTagsInput'
import ContactForm from './components/ContactForm'


const app = new Vue({
  el: '#app',
  components: {
    ArticleLike,
    ArticleTagsInput,
    ContactForm,
    
  }
})

★ArticleLikeとArticleTagsInputコンポーネントは別ページに問題なく表示されています。

※elの#appは、app.blade.phpにあります。
app.blade.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>
    @yield('title')
  </title>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  <!-- Bootstrap core CSS -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
  <!-- Material Design Bootstrap -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/css/mdb.min.css" rel="stylesheet">
</head>

<body>
  <div id="app">
    @yield('content')
  </div>
  <script src="{{ mix('js/app.js') }}"></script>
  <!-- JQuery -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/js/mdb.min.js"></script>
</body>

</html>

components/ContactForm.vue

<template>
<div>
  <p><b>{{title}}</b></p>
  <form>
    <span>ID : </span>          
    <input
      type="text"
      placeholder="input your id"
      v-model="ContactForm.Content"
    >
      <p>
        内容は {{ ContactForm.Content }} 
      </p>
    </form>
</div>
</template>

<script>
  export default {
    props: {
      title : String
    },
    data: function() {
      return {
        ContactForm:{
          Content:null,
        }
      }
    }
  }
</script>

<style scoped>
</style>

★Formの作り方はこちらを参考に、Laravelに置き換えました。

よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

Bladeでコンポーネントを参照するときにケバブケースで書くとどうでしょうか。

index.blade.php

<contact-form title="お問い合わせフォーム"></contact-form>

参考: 命名のケース

投稿2021/03/04 04:06

Lulucom

総合スコア1899

mikeko0901

2021/03/04 11:15

ありがとうございます。ケバブケースにしましたら表示されました！命名規則を失念しておりました・・・

Lulucom

2021/03/04 11:21

よかったです^ ^

mikeko0901

2021/03/04 13:02

すみません、、、ちなにみ教えていただきたいのですが・・・ components/ContactForm.vue <script> export default { props: { title : String }, data: function() { return { ContactForm:{ Content:null, } } } } </script> の、Content:null,のnullは、なぜnullと書いているのでしょうか？ inputのvalueの値が入るのになぜnullを書くのかな・・と思いまして・・・ご存じでしたらお願いします＞＜

Lulucom

2021/03/04 13:05

単に初期値をnullにしているだけだと思います。

mikeko0901

2021/03/04 13:24

初期値をセットするんですね！ありがとうございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

LaravelでVueコンポーネントが表示されない

関連した質問