VueJs与Laravel

Question

我正在学习Vuejs。我正在制作一个系统，用户可以将消息设置为收藏夹。 但是我收到以下错误。任何帮助解决的问题，将不胜感激。

  

[Vue警告]：无法安装组件：模板或渲染函数未安装   定义。在发现   --->最爱根源

下面是我的代码=>

Favorite.vue

<template>
    <span>
        <a href="#" v-if="isFavorited" @click.prevent="unFavorite(post)">
            <i  class="fa fa-heart"></i>
        </a>
        <a href="#" v-else @click.prevent="favorite(post)">
            <i  class="fa fa-heart-o"></i>
        </a>
    </span>
</template>

<script>
    export default {
        name: 'favorite',
        props: ['post', 'favorited'],

        data: function() {
            return {
                isFavorited: '',
            }
        },

        mounted() {
            this.isFavorited = this.isFavorite ? true : false;
        },

        computed: {
            isFavorite() {
                return this.favorited;
            },
        },

        methods: {
            favorite(post) {
                axios.post('/favorite/'+post)
                    .then(response => this.isFavorited = true)
                    .catch(response => console.log(response.data));
            },

            unFavorite(post) {
                axios.post('/unfavorite/'+post)
                    .then(response => this.isFavorited = false)
                    .catch(response => console.log(response.data));
            }
        }
    };
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

app.js

require('./bootstrap');
window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('Favorite', require('./components/Favorite.vue'));


const app = new Vue({
    el: '#app'
});

index.blade.php

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel">
                    <h3>All Posts</h3>
                    <hr>
                </div>
                @forelse ($posts as $post)
                    <div class="card">
                        <div class="card-header">
                            {{ $post->title }}
                        </div>

                        <div class="card-body mb-2">
                            {{ $post->body }}
                        </div>
                        @if (Auth::check())
                            <div class="card-footer mb-2">
                                <favorite
                                        :post={{ $post->id }}
                                                :favorited={{ $post->favorited() ? 'true' : 'false' }}
                                ></favorite>
                            </div>
                        @endif
                    </div>
                @empty
                    <p>No post created.</p>
                @endforelse

                {{ $posts->links() }}
            </div>
        </div>
    </div>
@endsection

Answer 1

在Vue.component('Favorite', require('./components/Favorite.vue').default);后面尝试.default。