Javascript-форум (https://javascript.ru/forum/)
-   Библиотеки/Тулкиты/Фреймворки (https://javascript.ru/forum/library-toolkit-framework/)
-   -   Как в компоненте VUE обратиться к свойствам или методам этого компонента из функции (https://javascript.ru/forum/library-toolkit-framework/78290-kak-v-komponente-vue-obratitsya-k-svojjstvam-ili-metodam-ehtogo-komponenta-iz-funkcii.html)

dpts 22.08.2019 10:29

Как в компоненте 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-то уже не прокатывает.

рони 22.08.2019 11:58

dpts,
ball.onmousedown = (e) => {
              console.log(this.anymethod);

Aetae 22.08.2019 12:08

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

dpts 22.08.2019 18:58

Цитата:

Сообщение от Aetae (Сообщение 511990)
...

P.S. К vue вопрос отношения не имеет, классическая работа с обработчиками событий.

Оно понятно. С этим и пытаюсь разобраться - сильно новичок.


Часовой пояс GMT +3, время: 22:47.