Why fail to call method in vue component if collaborate with a plugin?

Question

I get reference to fix orientation image from here :

https://github.com/blueimp/JavaScript-Canvas-to-Blob

I try in vue component like this :

<template>
    <div>
        ...
    </div>
</template>
<script>
    export default {
        ...
        methods: {
            ...
            changeImage(item, $event) {
                ...
                loadImage(
                    $event.target.files[0],
                    function (img) {
                        img.toBlob(
                            function (blob) {
                                // create a form
                                const form = new FormData();
                                form.append('file', blob, $event.target.files[0].name);
                                // define the done handler
                                const onDone = (response) => {
                                    if (!$.trim(response)) {   
                                        alert('No response');
                                    }
                                    else {   
                                        const files = $event.target.files || $event.dataTransfer.files
                                        if (!files.length)
                                            return;
                                        this.createImage(item, response)
                                        ...
                                    }

                                }
                                // define th post options
                                const options = {
                                    url: window.Laravel.baseUrl+'/product/addImageTemp',
                                    type: "POST",
                                    data: form,
                                    enctype: 'multipart/form-data',
                                    processData: false,  // tell jQuery not to process the data
                                    contentType: false   // tell jQuery not to set contentType
                                }
                                // submit the image
                                $.ajax(options).done(onDone);
                            }, $event.target.files[0].type
                        );
                    },
                    {
                         maxWidth: 600,
                         canvas: true,
                         pixelRatio: window.devicePixelRatio,
                         downsamplingRatio: 0.5,
                         orientation: true
                    } // Options
                );
            },
            createImage(item, response) {
                ...
            }
        }
    }
</script>

It works. It success upload image in folder. But on the console exist error :

Uncaught TypeError: Cannot read property 'createImage' of undefined

The error here : this.createImage(item, response)

Seems the error because it cannot use this in function (img) {

How can I solve this problem?

I need this plugin to fix orientation image

Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — Bert, Sep 13 '17 at 03:15
@Bert, does not seem to be duplicate. I did not find the answer there — moses toh, Sep 13 '17 at 03:22
@Bert, In the vue component must use `this` to call a method — moses toh, Sep 13 '17 at 03:27
@Bert, The error just appear if `this` in `function (img) {`. If `this` not in `function (img) {`, it does not error — moses toh, Sep 13 '17 at 03:35

score 1 · Accepted Answer · answered Sep 13 '17 at 03:40

1

Capture the current this at the beginning of the method and use it to call the createImage method:

methods:{
  changeImage(item, $event) {
    const self = this
    loadImage($event.target.files[0], function(img){
      ...
        self.createImage(...)
      ...
    })
  }
}

answered Sep 13 '17 at 03:40

Bert

80,741
17
199
164

Maybe you can help me. Look at this : https://stackoverflow.com/questions/49460980/how-can-i-activate-child-category-in-treeview-on-the-vue-component – moses toh Mar 24 '18 at 12:32

Why fail to call method in vue component if collaborate with a plugin?

1 Answers1