1

私の既存のLaravel 5.3プロジェクト内にLaravelパスポートを新たにインストールしました。

編集:Vueコンポーネント(デフォルトのサンプルコンポーネントでさえも)をインポートしようとすると、フラグメントとして表示されることに気付きました。

Vue コンポーネントをアプリケーションにインポートしようとしていますが、そうすると、クロムの Vue デバッグ ツールが要素がフラグメントであると通知します。

ページのソースを見ると、それらについて言及されていないため、コンポーネントがページに正しく登録されていると推測しています

私は周りを見回しており、vue でこのエラーを参照しているほとんどの場所は、vue コンポーネントがページ内の要素をルートとする div にラップされていないことが原因であることがわかりましたが、同じコンポーネントが新規インストールで機能しました。

これに関する問題を見つけるには、何を探す必要がありますか?

これが私のマスターレイアウトです

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    @include('includes.title')

    <!--Baked in styles -->
    @include('includes.styles')

    <!-- Theme Custom styles -->
    <link href="{{ asset('/css/custom.css') }}" rel="stylesheet">

    {{--Fonts and icons--}}


    <!-- Scripts -->
    <script>
        window.Laravel = <?php echo json_encode([
            'csrfToken' => csrf_token(),
        ]); ?>
    </script>
    @yield('css')

</head>
<body>
    @include('includes.navbar')
    @yield('content')

    <!-- Scripts -->


    {{--Core ecomplete JS--}}
    <script type="text/javascript" src="{{ asset('js/all.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/app.js') }}"></script>

    <script type="text/javascript" src="{{ asset('js/jquery.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/jquery-ui.custom.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/bootstrap.js') }}"></script>
    {{--End core ecomplete JS--}}

    <script type="text/javascript" src="{{ asset('js/sweetalert.min.js') }}"></script>

    @yield('js')

    <!--  Plugins -->
    <script src="{{ asset('js/gsdk-checkbox.js') }}"></script>
    <script src="{{ asset('js/bootstrap-select.js') }}"></script>
    <!--  End Plugins -->

    <!--  GSDK JS -->
    <script src="{{ asset('js/get-shit-done.js') }}"></script>





    @include('sweet::alert')
</body>
</html>

これが私のapp.jsのコードです

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

Vue.component(
    'passport-clients',
    require('./components/passport/Clients.vue')
);

Vue.component(
    'passport-authorized-clients',
    require('./components/passport/AuthorizedClients.vue')
);

Vue.component(
    'passport-personal-access-tokens',
    require('./components/passport/PersonalAccessTokens.vue')
);

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

ここに私の api.blade.php のコードがあります

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <passport-clients></passport-clients>
                <passport-authorized-clients></passport-authorized-clients>
                <passport-personal-access-tokens></passport-personal-access-tokens>
            </div>
        </div>
    </div>

@endsection

単純なルート クロージャーから呼び出します。

Web.php

Route::get('api', function(){
    return view('api');
});
4

0 に答える 0