@pavuuuk

Как сделать кружок, бегающий за курсором на vue,js?

Почему это не работает?
<body>
    
    <div class="app">
        <div class="circle"></div>
    </div>

    <script>
        
        new Vue({
            el: `.app`,
            data: {
                circle: document.querySelector(`.circle`)
            },
            methods: {
                move(e) {
                    this.circle.style.left = e.pageX + `px`;
                    this.circle.style.top = e.pageY + `px`;
                }
            },
            created() {
                document.addEventListener(`mousemove`, this.move);
            }
        });

    </script>

</body>


Я только сегодня начал изучать vue, и ещё не полностью прочитал документацию. Но мне кажется, что это должно работать, или я где-то ошибся?
  • Вопрос задан
  • 1428 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
data: {
    circle: document.querySelector(`.circle`)
},

Бессмысленно сохранять ссылки на элементы шаблона. После инициализации экземпляра Vue этот элемент уже не будет частью страницы - исходное содержимое .app Vue заменит элементами, которые создаст сам. Если хотите иметь доступ к ним, для этого есть специальный механизм. Т.е., добавляете атрибут ref элементу .circle:

<div class="circle" ref="circle"></div>

В методе move заменяете this.circle на this.$refs.circle:

this.$refs.circle.style.left = `${e.pageX}px`;
this.$refs.circle.style.top = `${e.pageY}px`;

https://jsfiddle.net/4esvu230/
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@ArtyomPLAY
Люблю Vue, React и все что с этим связано.
То как вы пытаетесь решить задачу - больше похоже на jQuery, нежели на vue.
Вот тут показано как получать позицию курсора: https://codepen.io/martinandersen3d/pen/eeKZGb
Далее можете создать computed свойство, которое возвращает объект со стилем, который будет задавать позицию нужного вам объекта. Ну и соответственно биндите этот объект на ваш див(:style="objectWithPosition"). Думаю с css все понятно будет.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы