Как динамически изменять inline стили при наведении на container?

Question

[Andrey Vasilev]

Есть контейнер с элементами, нужно при наведении на него обновлять inline стили для элементов.

section.about-fs(@mousemove="")
			div.about-rhombuse__item.about-rhombuse__anim(
				v-for="(anim, index) in 5"
				:class="'about-rhombuse__anim_' + (index + 1)"
				:style=""
				)
			div.content-wrap
				div.about-rhombuse__item.about-rhombuse__anim(
					v-for="(anim, index) in 5"
					:class="'about-rhombuse__anim_' + (index + 6)"
					:style=""
					)

Вот как выглядит код, из :style всё удалил и из mousemove.
Создавал объект со стилями, потом делал компутед свойство и закидывал в :style все изменения - результат 0.

Comments

[Ярослав Иванов]

Ясненько
И где функция в mousemove?

[Andrey Vasilev]

Ярослав Иванов,

Вот как выглядит код, из :style всё удалил и из mousemove.

чтобы глаза не мозолить, там все равно ошибочка

Answer 1

[Andrey Vasilev]

собсна:

section.about-fs(@mousemove="rhombAnim")
			div.about-rhombuse__item.about-rhombuse__anim(
				v-for="(anim, index) in 5"
				:class="'about-rhombuse__anim_' + (index + 1)"
				:style="rhombValue"
				)
			div.content-wrap
				div.about-rhombuse__item.about-rhombuse__anim(
					v-for="(anim, index) in 5"
					:class="'about-rhombuse__anim_' + (index + 6)"
					:style="rhombValue"
					)

data() {
		return {
			rhombValue: {}
		}
	},

methods: {
		rhombAnim(e) {
			const pageX = e.clientX,
				pageY = e.clientY
			this.rhombValue = {
				transform: "rotate(90deg) translateX(" + pageX/60 + "%) translateY(" + pageY/45 + "%)"
			}
		}
	}