Передача этого при использовании дросселя lodash с Vue - PullRequest
Новая
       13

Передача этого при использовании дросселя lodash с Vue

0 голосов
/ 19 октября 2018

Работа с этим У меня есть следующий код: 

export default {
  data(){
    return {
      width: 0,
      height: 0,
    }
  },
  methods: {
    resizedWindow: _.throttle(this.reset, 200),
    reset(){
      this.width = window.innerWidth;
      this.height = window.innerHeight;
    }
  },
  mounted(){
    this.reset();
    window.addEventListener('resize', this.resizedWindow);
  }
}

Но это дает мне следующую ошибку:

Uncaught TypeError: Не удается прочитать свойство'reset' of undefined

Обычно это связано с this, и я (обычно) знаю, как это исправить.Вы делаете что-то вроде этого: 

// Replace previous resizeWindow with...
resizedWindow(){
  let vm = this;
  _.throttle(vm.reset, 200);
},

Но это никогда не запускает метод reset.Я знаю это должно быть что-то глупое или пробел в моем понимании this - как я могу заставить эту работу?

1 Ответ

0 голосов
/ 19 октября 2018

Похоже, что в вашем случае this относится к объекту window.Вы можете переместить определение resizedWindow метода в created hook , как показано здесь , чтобы иметь доступ к this в качестве экземпляра Vue .. 

export default {
  data(){
    return {
      width: 0,
      height: 0,
    }
  },
  methods: {
    reset(){
      this.width = window.innerWidth;
      this.height = window.innerHeight;
    }
  },
  created() {
    this.resizedWindow = _.throttle(this.reset, 200)
  },
  mounted(){
    this.reset();
    window.addEventListener('resize', this.resizedWindow);
  }
}

В качестве альтернативы, вы можетеиспользовать IIFE .. 

export default {
  data(){
    return {
      width: 0,
      height: 0,
    }
  },
  methods: {
    resizedWindow() { (_.throttle(this.reset, 200))() },
    reset(){
      this.width = window.innerWidth;
      this.height = window.innerHeight;
    }
  },
  mounted(){
    this.reset();
    window.addEventListener('resize', this.resizedWindow);
  }
}
...