Vue js "this" переопределяется с помощью image.onload "this"

Question

У меня есть приложение VUE.Я использую this.data для доступа к переменным и методам данных.

В определенном методе мне нужно использовать img.onload, чтобы получить ширину изображения.Но сейчас есть 2 " this " и vue js методы и переменные не работают.Мне нужно альтернативное решение, чтобы оба работали.

vueMethod(url) {
 var img = new Image();
 img.onload = function() {
  this.size = {this.width,this.height}  //size is a vue variable
 }
 img.src = url;
}

Answer 1

Вы можете использовать arrow function ( документация ), чтобы сохранить область захвата:

vueMethod(url) {
  var img = new Image();
  img.onload = () => {
    this.size = {img.width, img.height}
  }
  img.src = url;
}

В этом примере this будет иметь ту же ссылку, что и при использованииэто рядом с var img

Answer 2

Поэтому, когда вы используете функцию с ключевым словом function, она создает новую область видимости для этого, чтобы сослаться на приведенный ниже пример

const obj = {
  size: 10,
  testFunc() {
   console.log(this, 'now obj')

   const func = function () {
     // this now refers to function its currently in
   }
   const otherFunc = () => console.log(this, 'refers to obj still')
  },
  testFunc2: () => {
    console.log(this, 'now window')
  }
}

любые вопросы, дайте мне знать, и я буду радпомощь

const obj = {
  size: 10,

  vueMethod(url) {
    console.log(this.size, 'this now refers to obj')
    const img = new Image();
    const self = this;

    img.onload = function() {
      console.log(this, 'this now refers to img')
      console.log(self.size, 'but you can reassign this to a var outside the scope');

      self.size = {
        width: this.width,
        height: this.height
      }
    };
    // mocking the onload dont include this
    img.onload();
    img.src = url;
  }
}

obj.vueMethod()

Answer 3

Вы можете присвоить this переменной vm перед вызовом img.onload функции следующим образом

vueMethod(url) {
  var img = new Image();
  let vm = this;
  img.onload = function() {
    vm.size = { this.width, this.height }  //size is a vue variable
  }
  img.src = url;
}

Answer 4

Вы должны сохранить Vue istance в переменную вне области действия img.onload, попробовав:

vueMethod(url) {
  var img = new Image();
  var vm = this;
  img.onload = function() {
      vm.size = {this.width,this.height}  //size is a vue variable
  }
  img.src = url;
}

Answer 5

Поместите var that = this; в функцию img.

Это даст вам область действия в вашей функции или привязку вашей функции при вызове, например,

vueMethod("url").bind(this)