Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.08.2019, 10:29
Кандидат Javascript-наук
Отправить личное сообщение для dpts Посмотреть профиль Найти все сообщения от dpts
 
Регистрация: 12.05.2015
Сообщений: 111

Как в компоненте 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-то уже не прокатывает.
Ответить с цитированием
  #2 (permalink)  
Старый 22.08.2019, 11:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

dpts,
ball.onmousedown = (e) => {
              console.log(this.anymethod);
Ответить с цитированием
  #3 (permalink)  
Старый 22.08.2019, 12:08
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,588

Если надо быстро наговнокиодить, то использовать стрелочную функцию:
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 вопрос отношения не имеет, классическая работа с обработчиками событий.
__________________
29375, 35

Последний раз редактировалось Aetae, 22.08.2019 в 12:11.
Ответить с цитированием
  #4 (permalink)  
Старый 22.08.2019, 18:58
Кандидат Javascript-наук
Отправить личное сообщение для dpts Посмотреть профиль Найти все сообщения от dpts
 
Регистрация: 12.05.2015
Сообщений: 111

Сообщение от Aetae Посмотреть сообщение
...

P.S. К vue вопрос отношения не имеет, классическая работа с обработчиками событий.
Оно понятно. С этим и пытаюсь разобраться - сильно новичок.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как обратиться к параметру объекта или массива Alex_dark74 Общие вопросы Javascript 5 31.07.2019 15:48
Как обратиться к свойствам объектов Basil_JS Общие вопросы Javascript 1 13.02.2015 21:23
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
Как определить пользователь сам нажал элемент или при помощи функции click(); finlandia Элементы интерфейса 13 10.01.2013 23:09