Q&A
前提・実現したいこと
Laravel+vue.jsで簡単なsnsアプリを作っています。
ボタンを押して画面に反映させる機能を実装中に下記のようなエラーとメソッドが使えませんでした。
そのため、メソッドが使えるか確認のため、テンプレートのコードをコンポーネント化して試したものが下記ですが、うまくいきませんでした。vue.jsでメソッドが使えないことを解決したいです。
発生している問題・エラーメッセージ
app.js?id=35e3b5dd86da3f32d36b:38467 [Vue warn]: Unknown custom element: <class> - did you register the component correctly? For recursive components, make sure to provide the "name" option. (found in <Root>) warn @ app.js?id=35e3b5dd86da3f32d36b:38467 createElm @ app.js?id=35e3b5dd86da3f32d36b:43810 createChildren @ app.js?id=35e3b5dd86da3f32d36b:43925 createElm @ app.js?id=35e3b5dd86da3f32d36b:43826 createChildren @ app.js?id=35e3b5dd86da3f32d36b:43925 createElm @ app.js?id=35e3b5dd86da3f32d36b:43826 createChildren @ app.js?id=35e3b5dd86da3f32d36b:43925 createElm @ app.js?id=35e3b5dd86da3f32d36b:43826 createChildren @ app.js?id=35e3b5dd86da3f32d36b:43925 createElm @ app.js?id=35e3b5dd86da3f32d36b:43826 createChildren @ app.js?id=35e3b5dd86da3f32d36b:43925 createElm @ app.js?id=35e3b5dd86da3f32d36b:43826 patch @ app.js?id=35e3b5dd86da3f32d36b:44386 Vue._update @ app.js?id=35e3b5dd86da3f32d36b:41794 updateComponent @ app.js?id=35e3b5dd86da3f32d36b:41915 get @ app.js?id=35e3b5dd86da3f32d36b:42327 Watcher @ app.js?id=35e3b5dd86da3f32d36b:42316 mountComponent @ app.js?id=35e3b5dd86da3f32d36b:41922 ./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js?id=35e3b5dd86da3f32d36b:46921 ./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js?id=35e3b5dd86da3f32d36b:49826 Vue._init @ app.js?id=35e3b5dd86da3f32d36b:42859 Vue @ app.js?id=35e3b5dd86da3f32d36b:42925 ./resources/js/app.js @ app.js?id=35e3b5dd86da3f32d36b:49948 __webpack_require__ @ app.js?id=35e3b5dd86da3f32d36b:20 0 @ app.js?id=35e3b5dd86da3f32d36b:50159 __webpack_require__ @ app.js?id=35e3b5dd86da3f32d36b:20 (anonymous) @ app.js?id=35e3b5dd86da3f32d36b:84 (anonymous) @ app.js?id=35e3b5dd86da3f32d36b:87 3app.js:38467 [Vue warn]: Unknown custom element: <class> - did you register the component correctly? For recursive components, make sure to provide the "name" option. (found in <Root>) warn @ app.js:38467 createElm @ app.js:43810 createChildren @ app.js:43925 createElm @ app.js:43826 createChildren @ app.js:43925 createElm @ app.js:43826 createChildren @ app.js:43925 createElm @ app.js:43826 createChildren @ app.js:43925 createElm @ app.js:43826 createChildren @ app.js:43925 createElm @ app.js:43826 patch @ app.js:44386 Vue._update @ app.js:41794 updateComponent @ app.js:41915 get @ app.js:42327 Watcher @ app.js:42316 mountComponent @ app.js:41922 ./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:46921 ./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:49826 Vue._init @ app.js:42859 Vue @ app.js:42925 ./resources/js/app.js @ app.js:49948 __webpack_require__ @ app.js:20 0 @ app.js:50159 __webpack_require__ @ app.js:20 (anonymous) @ app.js:84 (anonymous) @ app.js:87
app.js
PHP
1 import './bootstrap' 2 import Vue from 'vue' 3 import ArticleWorry from './components/ArticleWorry' 4 import Famous from './components/Click' 5 6 const app = new Vue({ 7 el: '#app', 8 components: { 9 ArticleWorry, 10 Click, 11 } 12 })
###Click.vue
<template> <button v-on:click="article">You clicked me {{ count }} times.</button> </template> <script> export default { data: function () { return { count: 0, }; }, methods: { article () { this.count=9; } } }; </script>
###app.blade.php
PHP
1<!doctype html> 2<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> 3 4<head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 8 <!-- CSRF Token --> 9 <meta name="csrf-token" content="{{ csrf_token() }}"> 10 11 <title>{{ config('app.name', 'Laravel') }}</title> 12 13 14 <!-- Scripts --> 15 16 <!-- Fonts --> 17 <link rel="dns-prefetch" href="//fonts.gstatic.com"> 18 <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> 19 <!-- Styles --> 20 <!-- Bootstrap CSS --> 21 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> 22 <link href="{{ asset('css/app.css') }}" rel="stylesheet"> 23 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"> 24 25</head> 26 27<body> 28 <div id="app"> 29 <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm"> 30 <div class="container"> 31 <a class="navbar-brand" href="{{ url('/') }}"> 32 {{ config('app.name', 'Laravel') }} 33 </a> 34 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}"> 35 <span class="navbar-toggler-icon"></span> 36 </button> 37 38 <div class="collapse navbar-collapse" id="navbarSupportedContent"> 39 <!-- Left Side Of Navbar --> 40 <ul class="navbar-nav mr-auto"> 41 42 </ul> 43 44 <!-- Right Side Of Navbar --> 45 <ul class="navbar-nav ml-auto"> 46 <!-- Authentication Links --> 47 @guest 48 <li class="nav-item"> 49 <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a> 50 </li> 51 @if (Route::has('register')) 52 <li class="nav-item"> 53 <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a> 54 </li> 55 @endif 56 @else 57 <a class="dropdown-item m-1" href="{{ route('articles.create') }}"> 58 悩みを投稿 59 </a> 60 <li class="nav-item dropdown"> 61 <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre> 62 {{ Auth::user()->name }} <span class="caret"></span> 63 </a> 64 65 <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"> 66 <a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault(); 67 document.getElementById('logout-form').submit();"> 68 {{ __('Logout') }} 69 </a> 70 71 72 <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"> 73 @csrf 74 </form> 75 </div> 76 </li> 77 @endguest 78 </ul> 79 </div> 80 </div> 81 </nav> 82 83 <main class="py-4"> 84 @yield('content') 85 </main> 86 </div> 87 <script src="{{ mix('js/app.js') }}"></script> 88 <script src="{{ asset('js/app.js') }}" defer></script> 89 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> 90 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 91 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> 92</body> 93 94</html> 95
###index.blade.php
PHP
1@extends('layouts/app') 2@section('content') 3@foreach($articles as $article) 4<div class="container"> 5 6 <div class="card m-2"> 7 <div class="card-body"> 8 <class class="row"> 9 <h5 class="card-title col-4">{{$article->user->name}}</h5> 10 @if(Auth::id() === $article->user->id) 11 <div class="dropdown col-8"> 12 <button class="btn btn-secondary dropdown-toggle float-right" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 13 Dropdown button 14 </button> 15 <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> 16 <a class="dropdown-item" href="{{route('articles.edit', ['article' => $article])}}">編集</a> 17 <form action="{{route('articles.destroy', ['article' => $article])}}" method="post"> 18 @csrf 19 @method('DELETE') 20 <input type="submit" value="削除"> 21 </form> 22 </div> 23 </div> 24 @endif 25 </class> 26 <p class="card-title">{{$article->created_at->format('Y/m/d H:i') }}</p> 27 <h5 class="card-title">{{$article->title}}</h5> 28 <p class="card-text">{{$article->body}}</p> 29 <div class="card-body pt-0 pb-2 pl-3"> 30 <div class="card-text"> 31 <click></click> 32 </div> 33 </div> 34 </div> 35 </div> 36</div> 37@endforeach 38@endsection 39
試したこと
app.jsのcomponentsがcomponentになっていないかの確認。
v-onclickやv-onclick.nativeの実行。
npm install、npm run devの実行。
scriptの位置の確認。
補足情報（FW/ツールのバージョンなど）
vue.js2.6.11
laravel6.20.32
あなたの回答
tips
プレビュー
