Как динамически изменить атрибут класса в объекте Vue $ ref?

Question

Я получил экземпляр объекта vue, который в коде я добавляю класс:

this.$refs.myrefs[0].$el.classList.add('className');

Но я бы также хотел, чтобы в коде что-то изменилось внутри 'className':

.className {  
   position: absolute;
   top: 100px;
   left: 100px;
}

Как я могу это сделать?Я хочу изменить «верх» и «влево», которые меняются в зависимости от положения мыши на экране.любая идея?Как я могу получить доступ к тому же классу и изменить его атрибуты?className - это то, что меняется.

Answer 1

Для этого на самом деле вам просто нужна проверка стиля привязки doc

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    left: 0,
    top: 0
  }
}

, а затем при перемещении мыши вам нужно просто получить положение мыши и обновить этот объект в качестве примера

this.styleObject.left = mouseLeft
this.styleObject.top = mouseTop

, если у вас много таких стилей для разных элементов DOM, поэтому я рекомендую использовать чистый JS

document.getElementById("elementId").style.top = mouseTop
document.getElementById("elementId").style.left = mouseLeft

или

document.querySelector(".className").style.top = mouseTop
document.querySelector(".className").style.left = mouseLeft