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:

 
Step 2: Crop images
 
 
  Crop  
 {{ image.type }} 
 
 
 

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, },

           

            
            Crop
            
            

             {{ image.type }}
            
           

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'); } },