Регистрация второго компонента? Vue. js Laravel6 - PullRequest
1 голос
/ 31 января 2020

Я создал проект fre sh Laravel6, чтобы выяснить, как регистрировать компоненты ...

Я клонировал ExampleComponent. vue to ExampleComponent2. vue

// ExampleComponent2. vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example2 Component</div>

                    <div class="card-body">
                        I'm an example2 component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component2 mounted.')
        }
    }
</script>

// app. js

Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('example-component2', require('./components/ExampleComponent2.vue').default);

// login.blade. php - Я поместил это под закрывающим тегом и @endsection для проверки на странице входа в систему ...

<example-component2></example-component2>

Я запустил "npm run watch" в командной строке, и нет ошибок сообщения ...

Когда я загружаю маршрут входа в систему, я открываю консоль, чтобы увидеть это сообщение об ошибке?

[Vue warn]: Неизвестный пользовательский элемент: - вы правильно зарегистрировать компонент? Для рекурсивных компонентов обязательно укажите опцию «name».

(находится в)


Как зарегистрировать дополнительные компоненты ???

1 Ответ

1 голос
/ 31 января 2020

// login.blade. php - Я поместил это под закрывающим тегом и @endsection для проверки на странице входа в систему ...

Вам нужен элемент с идентификатором, который вы определили в своем js / приложении. js:

const app = new Vue({
    el: '#app', // you need an element with id="app". Your vue component will replace this
});

Затем поместите свой компонент внутри этого элемента.

//login.blade.php

@extends('layouts.authentication')

@section('content')

<div id="app">
    <example-component2/>
</div>

@endsection
...