изменить эту ссылку на экземпляр vue - PullRequest
Новая
       11

изменить эту ссылку на экземпляр vue

0 голосов
/ 03 февраля 2019

Я хотел бы иметь доступ к экземпляру vue во внешней функции (debounce).однако это указывает на объект окна.Как я могу изменить контекст?На данный момент это указывает на объект "окно", однако я хотел бы получить vue "data"

Это мой пример

jsfiddle 

var debounce = function(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

new Vue({
  el: "#app",
  data: {
    media: 'phone'
  },
  methods: {
  	resizeMedia: debounce((e) => {
    						console.log('resize debounce');
              
    						//here vue this?
                this.media = window
                .getComputedStyle(
                document.querySelector('#app'), ':before')
                               .getPropertyValue('content')
                               .replace(/\"/g, '');
                
    },250),
  },
  mounted: function () {
      window.addEventListener('resize',  this.resizeMedia)
  },
  beforeDestroy: function () {
      window.removeEventListener('resize', this.resizeMedia)
  },
})
body {
  background: #ccc;
  padding: 20px;
}
body:before {
      content: "small-phone";
}
@media (min-width: 200px) {
    body:before {
      content: "phone";
    }
}
@media (min-width: 300px) {
    body:before {
      content: "tablet";
    }
}
@media (min-width: 400px) {
    body:before {
      content: "desktop";
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  {{ media }}
</div>

1 Ответ

0 голосов
/ 03 февраля 2019

Решением было бы использование «нормальной» функции вместо функции стрелки, например: 

resizeMedia: debounce(function() {
  // logs the vue instance
  console.log(this);               
 }, 250),
},
...