How can I update the msg variable in the following code?

Question

I have written the following code in a single Vue component. I am very new to Vue. I want to know how can I update the msg variable in the following and pass the updated value to the template in this Vue component:

<template>
    <div class="dropzone">
        <form id="dropzone" method='POST' enctype="multipart/form-data" v-on:drop="upload" @dragover.prevent>
            <my-vue-component v-model="msg" ref="markdownEditor" />
        </form>
    </div>
</template>

<script>
    export default {
        data: () => {
            return {
                msg: 'zyx'
            }
        },
        methods: {
            upload: (e) => {
                self.msg = '123'
            }
        }
    }
</script>

I am really stuck and none of the links that google redirects me to are out of my reach. Because all of them either talk about new Vue({}) or dont provide much on export default.

Am I doing something wrong here?

I have also tried this.msg, but then I get the error saying msg of undefined...

skirtle · Accepted Answer · 2020-04-17T11:24:35.763

1

Change this:

upload: (e) => {
    self.msg = '123'
}

to this:

upload (e) {
    this.msg = '123'
}

Note that upload (e) { is short-hand for upload: function (e) {.

The key changes are:

Use this instead of self.
Don't use an arrow function because that binds this to the surrounding scope and in this case that's the global scope. What you want is for this to be bound to your component instance (which is actually a Vue instance) so you need to use a normal function. Vue tries to ensure the binding is correct but it can't do that with an arrow function because it is already bound.

The config options that appear in a component like this are almost all the same as the config options that you would pass to new Vue, so if you see examples that are using the other one it will rarely make any difference. Usually it is pretty obvious when a config setting doesn't make sense for one or the other.

edited Apr 17 '20 at 11:24

answered Apr 17 '20 at 11:18

skirtle

27,868
4
42
57

Thanks, this worked. Also, can you please tell me how can I pass a value from ajax success to `this.msg`? – Code_Ninja Apr 17 '20 at 11:24
@Code_Ninja In that case you will probably need to use an arrow function for the callback so that the `this` value will be the same as in the surrounding scope. There are other ways but an arrow function is usually the easiest. Function binding is not specific to Vue, so make sure you're clear exactly how `this` works within functions and you should be fine. – skirtle Apr 17 '20 at 11:29
I am using Jquery ajax, but I cannot access the this variable inside success function or the done status. What should I do in that case? – Code_Ninja Apr 17 '20 at 11:46
@Code_Ninja Without seeing the code I can't really guess what the problem is. I suggest you post a new question. – skirtle Apr 17 '20 at 12:16
its okay, no problem, I have figured out a solution as mentioned in [this](https://stackoverflow.com/questions/16805306/jquery-return-ajax-result-into-outside-variable) link. All I needed to do was add `async: false` to the request. – Code_Ninja Apr 17 '20 at 12:37
1

@Code_Ninja Setting `async: false` is strongly discouraged. It will cause the browser to seize while the request is pending. It is very unlikely that you are in a scenario where its use is justified. – skirtle Apr 17 '20 at 12:59
I agree, currently I am using Jquery ajax, I am planning to shift to Vue JS ajax request. – Code_Ninja Apr 17 '20 at 13:09

How can I update the msg variable in the following code?

1 Answers1