Vue - Advanced Cropper (Uncaught TypeError: this.$refs.cropper.getResult is not a function)

Question

I have a Vue Advanced Cropper's cropping function as shown below:

crop() {
            const { canvas } = this.$refs.cropper.getResult();
            if (canvas) {
                const form = new FormData();
                canvas.toBlob(blob => {
                    form.append('files[]', blob);
                    // Perhaps you should add the setting appropriate file format here
                }, 'image/jpeg');

                this.formData = form;

            }

        },

My HTML:

<div v-if="cropView">
    <h1>Step 2: Crop images</h1>
    <div class="upload-example__cropper-wrapper">
        <div v-for="image in this.images" :key="image">
            <cropper ref="cropper" class="upload-example__cropper"
                     check-orientation :src="image.src"/>
            <button v-if="image.src" class="upload-example__button" @click="crop">Crop</button>
            <!--<div class="upload-example__reset-button" title="Reset Image" @click="reset()"></div>-->
            <div class="upload-example__file-type" v-if="image.type">
                {{ image.type }}
            </div>
        </div>
    </div>
</div>

I've included the import for Cropper:

import {Cropper} from 'vue-advanced-cropper'

Version in package.json:

"vue-advanced-cropper": "^2.8.1"

Everything works fine until I get to the crop function where it says the following:

Uncaught TypeError: this.$refs.cropper.getResult is not a function

My first thought was that it might have something to do with looping through multiple images, but it doesn't work with just one image either. I tried combining the parts from the disc and uploading to the server from here: https://norserium.github.io/vue-advanced-cropper/guides/recipes.html#upload-image-to-a-server

--- edit ---

I also exported the default value, and the cropping worked, but I just didn’t get the result:

export default {

    components: {
        Cropper,
    },

Answer 1

aleksKamb found the right solution. After applying the index it seems to be working. I edited v-for to:

            
            Crop
            
            

                {{ image.type }}
            
        

Then I edited the crop function to:

crop(index) {
            const { canvas } = this.$refs.cropper[index].getResult();
            if (canvas) {
                const form = new FormData();
                canvas.toBlob(blob => {
                    form.append('files[]', blob);
                    // Perhaps you should add the setting appropriate file format here
                }, 'image/jpeg');

            }
        },

Answer 2

Considering that you are using the same reference name for every element in the v-for, this.$refs.cropper is probably an array. This also depends on your Vue version. If this is the case, you may have to pass arguments to your clipping function so that the index of the calling element is known and getResult can be called correctly.

Try to console log this.$refs. Also see if this thread is useful? v-for Vue.js reference inside the loop