[Vuejs]-How can I update the msg variable in the following code?

by

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:

  1. Use this instead of self.
  2. 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.

👤skirtle

Leave a comment