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

[AlexanderRN]

I have a crop function for Vue Advanced Cropper like this:

           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 have included the import for Cropper:

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

Version from package.json:

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

Cropper is also in components:

    export default {

        components: {
            Cropper,
        },

Everything works 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 may have something to due with looping through multiple images, however it does not work with juse one either. I have tried combining the part from disc and upload to server from here: https://norserium.github.io/vue-advanced-cropper/guides/recipes.html#upload-image-to-a-server

Any ideas why it says it's not a function please?

[Norserium]

@AlexanderRN, what's version of Vue do you use? Did you check what's inside of this.$refs.cropper (by debugger / console.log)?

[AlexanderRN]

 Hi, @Norserium, thank you for your reply! These are the versions:

        "vue-advanced-cropper": "^2.8.1"
        "vue": "^3.2.33",
        "vue-loader": "^17.0.0",

    I ran the "npm install -S vue-advanced-cropper@next" to get for Vue 3
    
    Yes, and I'm no expert in that, but from what I could see it looked fine, but I could not find the function

[AlexanderRN]

@Norserium I have found out it's related to the iteration. However I'm not sure just yet how I can solve it. This:
this.$refs.cropper[0].getResult()
Works but then I will need to pass an index somehow in order for it to know which cropper it has reached to. I will keep this post updated when I find a solution as more people might have the same issue.

[Norserium]

@AlexanderRN, starting of 3.2.25 when ref is used inside v-for, the resulting ref value will be an array containing the corresponding elements. So, yes, you have the array and it's pretty easy to pass the corresponding index:

<div v-for="(image, index) in this.images" :key="index">
      <cropper ref="cropper" class="upload-example__cropper" check-orientation :src="image.src"/>
      <button v-if="image.src" class="upload-example__button" @click="crop(index)">Crop</button>
      <div class="upload-example__file-type" v-if="image.type">
          {{ image.type }}
      </div>
</div>

[AlexanderRN]

I think I solved it by changing the v-for to:

           <div v-for="(image, index) 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(index)">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>

And the crop function to:

           crop(index) {
                console.log(this.$refs.cropper[index].getResult());
                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');

                    console.log(form);
                }
            },

Thank you very much Norserium for the help and the great tool!

[Norserium]

Nice job. But I should note, that you should use only primitive values as the keys, and image isn't one. I suppose it's pretty safe to use index here.