Question

当我尝试通过Vue发布请求时出现此错误

我的app.js

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

我的Comment.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>)

Answer 1

您的模板中包含一些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
    }
});

未知的自定义元素laravel vue

1 个答案: