laravel - Vue.js | 组件不工作。| 未知的自定义元素：

Question

我有这个错误：

[Vue 警告]：未知的自定义元素：<image-upload>- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

在 myApp.js 我添加：

Vue.component('image-upload',require('./components/ImageUpload.vue').default);

在ImageUpload.Vue我有这个代码：

<script>
    import Croppie from 'croppie'

    export default {
        props: ['imgUrl'],
        mounted() {
            this.image = this.imgUrl
            this.setupCroppie()
        },
        data() {
            return {
                croppie: null,
                image: null
            }
        },
        methods: {
            setUpCroppie() {
                let el = document.getElementById('croppie')
                this.croppie = new Croppie(el, {
                    viewport: {width: 200, height: 200, type: 'circle'},
                    boundary: {width: 220, height: 220},
                    showZoomer: true,
                    enableOrientation: true
                })
                this.croppie.bind({
                    url: this.image
                })
            },
        }
    }
</script>
<template>
    <div class="image-upload-wrapper image-upload">
        <p>this is my component</p>
        <div id="croppie"></div>
    </div>
</template>

在刀片中：

<image-upload img-url="{{url('img/user.png')}}"></image-upload>

我在这里关注文档以使用 CroppieJs https://foliotek.github.io/Croppie/

谢谢..

标签： laravelvue.js

Answer 1

您是否尝试将 : 添加到您的 vue 组件中。

<image-upload :img-url="{{url('img/user.png')}}"></image-upload>

Vue 组件是否出现在 Vue.js 检查器中？

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd