Vue.js использование refs

148

05 января 2019, 11:50

Всем привет ,как будет выглядеть если явную работу с DOM тут заменить на refs? У меня что-то не выходит так заменить

const holder = document.querySelector('.item');
      holder.ondragover = (event) => {
        event.preventDefault();
        event.stopPropagation();
        holder.classList.add('holder--dragover');
        return false
      };
      holder.ondragleave = holder.ondragend = holder.ondrop = (event) => {
        event.preventDefault();
        event.stopPropagation();
        holder.classList.remove('holder--dragover');
        return false
      };

Answer 1

Ставите элементу ref:

<div ref="holder" class="item"></div>

Если такой элемент на странице будет один, то получить можно через

this.$refs.holder

Если много, то:

this.$refs.holder[<индекс элемента>]

У вас по коду скорее всего один элемент, вот так будет выглядеть код:

const holder = this.refs.holder;
holder.ondragover = (event) => {
  event.preventDefault();
  event.stopPropagation();
  holder.classList.add('holder--dragover');
  return false
};
holder.ondragleave = holder.ondragend = holder.ondrop = (event) => {
  event.preventDefault();
  event.stopPropagation();
  holder.classList.remove('holder--dragover');
  return false
};