Как в компоненте VUE обратиться к свойствам или методам этого компонента из функции
Допустим есть код (примитивный пример для краткости и передачи смысла)
Vue.component('ball', { data: function () { return { x:Number, y:Number } }, template:` ................... `, mounted:function(){ // Пример с [url]https://learn.javascript.ru/drag-and-drop[/url] var ball = document.getElementById('ball'); ball.onmousedown = function(e) { var coords = getCoords(ball); var shiftX = e.pageX - coords.left; var shiftY = e.pageY - coords.top; ball.style.position = 'absolute'; document.body.appendChild(ball); moveAt(e); ball.style.zIndex = 1000; // над другими элементами function moveAt(e) { ball.style.left = e.pageX - shiftX + 'px'; ball.style.top = e.pageY - shiftY + 'px'; } document.onmousemove = function(e) { moveAt(e); }; ball.onmouseup = function() { document.onmousemove = null; ball.onmouseup = null; }; } ball.ondragstart = function() { return false; }; function getCoords(elem) { // кроме IE8- var box = elem.getBoundingClientRect(); return { top: box.top + pageYOffset, left: box.left + pageXOffset }; } // -------------------------------------------------- }, methods:{ anymethod:function(param){ } } }); Вопрос, как из функции, обрабатывающей onmousedown или любой функции внутри нее обратиться к методу anymethod или к свойствам в data, this-то уже не прокатывает. |
dpts,
ball.onmousedown = (e) => { console.log(this.anymethod); |
Если надо быстро наговнокиодить, то использовать стрелочную функцию:
document.onmousemove = (e) => { moveAt(e); this.anymethod(); }; А если делать по человечески, то не должно создаваться каких-то функций внутри mounted, всё должно быть методами, а в обработчик должен назначаться сам объект. { //... mounted(){ //... document.addEventListener('mousemove', this); }, methods: { //... *!*handleEvent(event){ switch (event.type){ case 'ondragstart': event.preventDefault(); break; //... case 'mousemove': this.moveAt(event); this.anymethod(event); break; default: //... } },*/!* moveAt(){ //... }, anymethod(){ //... } } } P.S. К vue вопрос отношения не имеет, классическая работа с обработчиками событий. |
Цитата:
|
Часовой пояс GMT +3, время: 22:47. |