Как в компоненте 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:41. |