How to solve error : [Vue warn]: Unknown custom element: <delete-account-modal>?

Question

我的看法是这样的:

@extends('layouts.main')

@section('title', 'Bank | Myapp')

@section('content')

    @if (Auth::user())
        ...

        <li>
            <a href="javascript:;" @click="modalShow('modal-delete-account',{{ $account['id'] }})">
                <span class="glyphicon glyphicon-trash"></span>&nbsp;Hapus
            </a>
        </li>
        ...                                 

    @endif

@endsection

@section('modal')
    @include('components.modal.profile.setting.account')
    <delete-account-modal id="modal-delete-account" :id-account="idModal"></delete-account-modal>
@endsection

执行时，控制台出现如下错误：

[Vue warn]: Unknown custom element: <delete-account-modal> - did you register the component correctly? For recursive components, make sure to provide the "name" option.  (found in root instance)

我该如何解决错误？

Answer 1

这个问题的答案完全取决于您编写组件的方式。因为 Laravel 鼓励使用 single file components 我假设 delete-account-model 在 resources/assets/js/components 中一个名为 delete-account-model.vue 的文件中，我还假设 elixir 设置为正确编译 .vue 个文件

因此，为了在全局范围内注册组件，您只需将以下内容添加到 resources/assets/js/app.js:

Vue.component('delete-account-modal', require('./components/delete-account-model.vue'));

然后 运行 gulp 到 re-compile 一切。然后您应该会发现 delete-account-modal 组件可用。