首页 > 解决方案 > 为什么 Vue 无法注册我的组件?

问题描述

我在文件中编写了以下 Vue 组件app/resources/js/components/class/createComponent.vue

        <template>
    <div class = "container">
        <div class = "row justify-content-center">
            <div class = "col-md-8">
                <div class = "card card-default">
                    <div class = "card-header">Create Class</div>
                    <form action = "api/class/store" method = "POST" @submit = "createClass()">
                        <div class = "form-group">
                            <input type = "text" name = "name" v-model = "name" placeholder = "Class Name" class = "form-control">
                        </div>
                        <div class = "form-group">
                            <input type = "submit" value = "Submit" class = "btn btn-info">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>
    <script>
        export default {
        name: "createComponent",
        data() {
            return {
                name : ''
            }
        },
        methods: {
            createClass() {
                axios.post('api/class/store', {
                    name: this.name
                })
            }
        }
        }
    </script>
    <style scoped>
    
    </style>

我因此在以下位置注册组件app/resources/js/app.js

Vue.component('class-create', require('./components/class/createComponent.vue').default);

但是,HTML 无法加载元素home.blade.php并出现以下错误:

[Vue warn]: Unknown custom element: <class-create> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

奇怪home.blade.php的是,加载<example-component>罚款,但无法加载我的自定义组件。有人可以识别我做错了什么吗?谢谢。

编辑. 这可能与编译app.js文件有关,public/js而不是resources/js?

标签: javascriptlaravelvue.jsvue-component

解决方案


推荐阅读