如何修复Vue警告]:未知的自定义元素:<password-input>?

时间:2019-02-13 14:41:23

标签: javascript laravel vue.js

我正在尝试修复组件中的以下错误,但仍然失败。错误如下:

  

[Vue警告]:未知的自定义元素:-您是否正确注册了组件?对于递归组件,请确保提供“名称”选项。

在我的密码组件的以下脚本中,我具有以下内容:

<template>
    <div class="form-group form-material floating" data-plugin="formMaterial">
        <input id="password" type="password" class="form-control" name='password'>
        <label class="floating-label">Create password</label>

        <span class="password-info"><i class="fa fa-info-circle"></i></span>
        <div class="password-rules">minimum 6 characters</div>

        <span v-if="this.error != null" :class="['invalid-feedback', {'inline': this.error != null}]">
             <strong>{{ error }}</strong>
        </span>
    </div>

</template>

<script>
    import Password from 'password-strength-meter'

    export default{
        props: ['error'],

        mounted: function(){
            const $password = $('#password', this.$el);

            $password.password({
                showText: false,
                animate: true,
            });
        }
    }
</script>

<style lang="scss">
    @import '~password-strength-meter/dist/password.min.css';

</style>

问题在于打开页面时vue组件未加载,并且刷新后错误消失了。

在laravel刀片中,我通过以下方式使用它:

<password-input @if($errors->has('password')) :error="'{{$errors->first('password')}}'" @endif></password-input>

在app.js中

我有以下脚本

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

有人可以指导我如何解决它吗?如果有人可以指导我解决此问题,我将不胜感激。我已经看到了这个question,但不能解决我的问题。

2 个答案:

答案 0 :(得分:1)

通常在您在app.js文件中创建Vue实例时,组件便已注册。

const app = new Vue({
    el: '#app',
    components: { ExampleComponent } // Note!!!
});

您可以在此处找到更多信息:https://laracasts.com/discuss/channels/vue/little-help-with-laravel-and-vue-components-registration

答案 1 :(得分:0)

嘿,您曾经触底吗?我整天都在为同一件事挣扎。断断续续的部分一直在杀死我的工作效率。无论如何。像您一样,我在="this.myVar"部分中使用<template>而不是="myVar",并且当我进行更改后,此问题就没有发生过。