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/

谢谢..

Answer 1

Have you tried to add a : to your vue component.

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

Does the Vue component appear in the Vue.js inspecter?

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

Vue.Js |组件无法正常工作。 |未知的自定义元素：<image-upload>

1 个答案: