VueCropper загружается неправильно

Question

Итак, я хотел использовать VueCropper в своем Компоненте, но у меня возникают некоторые проблемы:

1. Он отображает sourceImg, но не имеет рамки для обрезки и предварительного просмотра.
2. выходные данные console.log (this. $ refs) и console.log (this. $ refs.cropper) парадоксальны (см. ниже)

Вот код:

<template>
    <div class="img-selector">
        <template v-if="!fileSelected">
            <b-form-file
                v-model="imgFile"
                placeholder="Choose a file..."
                no-drop
                accept="image/*"
            ></b-form-file>
            <b-button @click="onNext">Next</b-button>
        </template>
        <template v-else>
            <div class="img_container">
                <vue-cropper
                    ref="cropper"
                    :aspect-ratio="16/9"
                    :guides="true"
                    :view-mode="2"
                    drag-mode="crop"
                    :background="true"
                    :zoomable="true"
                    :src="imageUrl"
                    preview=".destination"
                    :minCropBoxWidth="160"
                    :minCropBoxHeight="90"
                    :img-style="{ 'width': '400px', 'height': '300px'}"
                ></vue-cropper>
            </div>
            <div class="img_container">
                <!--
                <b-img fluid-grow class="image" class="destination"></b-img>
                -->
                <div class="destination"></div>
            </div>
            <b-button @click="onBack">Back</b-button>
            <b-button @click="onSelect">Select</b-button>
        </template>
        <b-button @click="$emit('canceled')">Cancel</b-button>
    </div>
</template>

<script>
import VueCropper from 'vue-cropperjs'
import 'cropperjs/dist/cropper.css'

export default {
    name: 'img-selector',
    data: () => ({
        imageUrl: '',
        croppedImageUrl: '',
        imgFile: null,
        fileSelected: false
    }),
    components: {
        'vue-cropper': VueCropper
    },
    methods: {
        onNext() {
            if(!!this.imgFile) {
                let reader = new FileReader()
                reader.addEventListener('loadend', () => {
                    this.imageUrl = reader.result
                })
                reader.readAsDataURL(this.imgFile)
            } else {
                alert('You must first choose a File!')
                return
            }

            console.log(this.$refs)           
            // Output:
            // (i) value below was evaluated just now
            // >{}
            //   > cropper: vue-cropper
            //   > __proto__: Object
            console.log(this.$refs.cropper)
            // Output:
            // undefined

            this.fileSelected = true
        },
        onBack() {
            this.imgFile = null
            this.fileSelected = false
            this.croppedImageUrl = null
            this.imageUrl = null
        },
        onSelect() {         
            this.$refs.cropper.getCroppedCanvas().toBlob(blob => {
                const file = new File(blob, this.imgFile.name)
                this.$emit('selected', {data: file})
            })
        }
    }
}
</script>

<style type="scss">
.image {
    display: block;
    max-width: 100%;
}

.image_container {
    width: 400px;
    height: 300px;
    display: inline-block;
}
</style>

Также, если я напишу: components: { VueCropper} this. $ Refs - пустой объект, и sourceImage не отображается.

Я думаю, проблема в том, что каким-то образом VueCropper загружается неправильно. К сожалению, я понятия не имею, как исправить эту ошибку.

Я благодарен за любую помощь!

Answer 1

Хорошо, я обнаружил, что это работает после того, как я заменил операторы v-if v-else на v-show.

В документации сказано, что v-if отображает элементы только при необходимости, поэтому VueCropper не был обработан в начале и не был добавлен в $ refs. В сравнении v-show всегда отображает элементы и включает / отключает только их видимость.