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

Question

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

1

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

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" неопределенного

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

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

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

Djave 19 окт. 2018, в 11:02

Источник

2

«this» не определено, потому что _.throttle(this.reset, 200) вызывается для определения объекта даже до назначения «export», поэтому ссылка «this» является окном (или «undefined» в вашем случае, потому что у вас включен строгий режим) ).
Max Sinev 19 окт. 2018, в 10:02

Теги:

javascript

vue.js

this

lodash

1 ответ

Ещё вопросы

«this» не определено, потому что _.throttle(this.reset, 200) вызывается для определения объекта даже до назначения «export», поэтому ссылка «this» является окном (или «undefined» в вашем случае, потому что у вас включен строгий режим) ).

Husam Ibrahim · Accepted Answer · 2018-10-19T07-23-00.000Z

Кажется, что в вашем случае this относится к объекту window. Вы можете перенести определение метода resizedWindow на created крюк, как показано здесь, чтобы иметь доступ к 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);
  }
}