LaravelにVue.jsを導入してオリジナルサービスを練習で作っているのですが、
bladeにapp.jsで登録しているComponentsが画面に表示されません。
Consoleのエラーをみると以下のように表示されているのですが、自己解決ができなかったので、質問させていただきます。
コードも伏せて載せておきますのでどうかよろしくお願いします。
エラー文
[Vue warn]: Unknown custom element: <card-list> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
実際のコード
show.blade.php
PHP
1@extends('layouts.app') 2 3@section('header_menu') 4@parent 5 6<body class="{{$board->color}}"> 7 @section('content') 8 <div id="app"> 9 <card-list></card-list> 10 </div> 11 @endsection 12</body> 13
app.js
Javascript
1 2/** 3 * First we will load all of this project's JavaScript dependencies which 4 * includes Vue and other libraries. It is a great starting point when 5 * building robust, powerful web applications using Vue and Laravel. 6 */ 7 8require('./bootstrap'); 9 10window.Vue = require('vue'); 11 12/** 13 * The following block of code may be used to automatically register your 14 * Vue components. It will recursively scan this directory for the Vue 15 * components and automatically register them with their "basename". 16 * 17 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component> 18 */ 19 20// const files = require.context('./', true, /.vue$/i) 21// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default)) 22 23Vue.component('example-component', require('./components/ExampleComponent.vue').default); 24Vue.component('card-list', require('./components/CardList.vue').default); 25 26/** 27 * Next, we will create a fresh Vue application instance and attach it to 28 * the page. Then, you may begin adding components to this application 29 * or customize the JavaScript scaffolding to fit your unique needs. 30 */ 31 32const app = new Vue({ 33 el: '#app' 34});
CardList.vue
<template> <div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="card card-default"> <div class="card-header">Card-List</div> <div class="card-body"> Card-List </div> </div> </div> </div> </div> </template> <script> export default { mounted() { console.log('Component mounted.') } } </script>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。