时间戳

首页 > 解决方案 > 未知的自定义元素 laravel vue

laravel - 未知的自定义元素 laravel vue

问题描述

当我尝试使用 vue 进行发布请求时出现此错误

我的 app.js

Vue.component('comment', require('./components/Comment').default);
const app = new Vue({
   el: '#app',
   store
});

我的评论.vue

    <template>
        <div class="container">
            <div class="row">
                <div class="col-md col-md-12">
                   @comments(['model'=>$book])
                </div>
            </div>
        </div>
     </template>

     <script type="text/javascript">


export default {
            props: ['book'],
            mounted() {
                console.log('Mounted');
            },
            data() {
                return {
                    message: '',
                };
            },

            methods: {
                formSubmit(e) {
                    e.preventDefault();
                    let self = this;

                    axios.post('comments', {
                        message: this.message,

                    })
                    .catch( (error) => {
                        flash("Something Went Wrong", "danger");
                    });
                }
            }
        }
    </script>

我在这个页面中使用了这个名为 review.blade.php 的组件

<div id="app">
    <comment></comment>
</div>

但是是给我控制台中的错误我必须给组件命名还是什么。我无法理解这个问题

vue.common.dev.js:630 [Vue warn]: Unknown custom element: 
<comment> - did you register the component correctly? 
For recursive components, make sure to provide the "name" option.

(found in <Root>)

标签： laravelvue.js

解决方案

您的模板中有一些 Blade 语法：

<div class="col-md col-md-12">
    @comments(['model'=>$book])
</div>

如果这不能解决您的问题，那么您可能需要检查何时加载app.js文件或在本地为 Vue 实例加载组件：

import comment from './components/Comment';

const app = new Vue({
    el: '#app',
    store,
    components: {
        comment
    }
});

推荐阅读