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 >
        <div v-for="image in this.images" :key="image">
            <cropper ref="cropper" 
                     check-orientation :src="image.src"/>
            <button v-if="image.src"  @click="crop">Crop</button>
            <!--<div  title="Reset Image" @click="reset()"></div>-->
            <div  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"

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

--- Edit ---

I have export default also, and cropping works, just not getting the results:

    export default {

    components: {
        Cropper,
    },

CodePudding user response：

Considering that you are using the same ref name for each element in your v-for it might be possible that this.$refs.cropper is an array. This depends on your version of Vue as well. If that's the case you might have to pass a parameter to your crop function so that the index of the invoking element is known and getResult can be called correctly.

Try console logging this.$refs. Also maybe see if this thread is useful? Vue.js ref inside the v-for loop

CodePudding user response：

aleksKamb had the right solution. After applying indexes it appears to be working. I edited the v-for to:

            <div v-for="(image, index) in this.images" :key="image">
            <cropper ref="cropper" 
                     check-orientation :src="image.src"/>
            <button v-if="image.src"  @click="crop(index)">Crop</button>
            <!--<div  title="Reset Image" @click="reset()"></div>-->
            <div  v-if="image.type">
                {{ image.type }}
            </div>
        </div>

And then I edited the cropping 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');

            }
        },