samedi 10 février 2018

Vue JS - Issue adding multiple components

I'm new to Vue JS and I've read several different articles online and I can't figure out how to display my component. I'm using Laravel 5.5.

I have a login view page with the following:

<div id="app">
    <div class="login-box">
        <login-form></login-form>
    </div><!-- /.login-box -->
</div>

I created a Login.vue page at /components/Auth/Login.vue:

<template>
    <div class="login-box-body">
        <p class="login-box-msg"> Sign in to start your session. </p>
        <form action="" method="post">
            <input type="hidden" name="_token" value="">
            <div class="form-group has-feedback">
                <input type="text" class="form-control" placeholder="Username" name="username"/>
                <span class="glyphicon glyphicon-user form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" class="form-control" placeholder="Password" name="password"/>
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="row">
                <div class="col-xs-8">
                    <div class="checkbox icheck">
                        <label>
                            <input type="checkbox" name="remember"> Remember Me
                        </label>
                    </div>
                </div>
                <div class="col-xs-4">
                    <button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
                </div>
            </div>
        </form>
        <a href=""> Forgot Password? </a><br>
    </div>
</template>

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

I've registered it in the app.js file:

require('./bootstrap');

Vue.component('example', require('./components/Example.vue'));
Vue.component('login-form', require('./components/Auth/Login.vue'));

const app = new Vue({
    el: '#app',

});

I'm getting the error, [Vue warn]: Unknown custom element: <login-form> - did you register the component correctly? For recursive components, make sure to provide the "name" option. (found in root instance).

I've registered it in app.js as seen above and if I use <example></example> it appears correctly. How can I get this to appear?



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire