Unknown custom element: did you register the component correctly? Vue js Laravel

0
votes

I have that error: Unknown custom element: - did you register the component correctly? I want do likes system with Vue.js . How i can fix this? Please help. It seems like I wrote everything correctly ... I have practically no experience with a tool like Vue.js, so I don’t quite understand what’s wrong

web.php 

Route::post('/blog/like','BlogController@getlike');
Route::post('/blog/like/{id}','BlogController@like');

BlogController

public function getlike(Request $request)
{
    $article = Article::find($request->article);
    return response()->json([
        'article'=>$article,
    ]);
}


  public function like(Request $request)
{
    $article = Article::find($request->article);
    $value = $article->like;
    $article->like = $value+1;
    $article->save();
    return response()->json([
        'message'=>'Thanks',
    ]);
}

LikeComponent.vue

<template>
    <div class="container">
        <p id="success"></p>
       <a href="http://"><i @click.prevent="likePost" class="fa fa-thumbs-up" aria-hidden="true"></i>({{ totallike }})</a>
    </div>
</template>
    <script>
        export default {
            props:['article'],
            data(){
                return {
                    totallike:'',
                }
            },
            methods:{
                likePost(){
                    axios.post('/blog/like/'+this.article,{article:this.article})
                    .then(response =>{
                        this.getlike()
                        $('#success').html(response.data.message)
                    })
                    .catch()
                },
                getlike(){
                    axios.post('/blog/like',{article:this.article})
                    .then(response =>{
                        console.log(response.data.article.like)
                        this.totallike = response.data.article.like
                    })
                }
            },
            mounted() {
                this.getlike()
            }
        }
    </script>

app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('like-component', require('./components/LikeComponent.vue').default);
const app = new Vue({
    el: '#app',
});

article.blade.php

 <like-component :post="{{ $article->id }}"></like-component>
1
javascriptlaravelvue.jsvue-component
If you are using SingleFileComponent then you should avoid using Vue.component to register the component, I think you are using a module bundler also. I'll recommend you to take a look at this website freecodecamp.org/news/… – mohammad.kaab

1 Answers

0
votes

i think you have to define your sub components inside a tag which has an id app in

article.blade.php

like this :

< div id=“app”>

< like-component : post="{{ $article->id }}">

< / div> “

and you have to run npm run watch in your console