Добавление события мыши в динамически созданный элемент Vuejs
Мне просто интересно, пробовал ли кто-нибудь сделать что-то подобное (это в рамках созданного метода vuejs):
for (let i = 0; i < this.items.length; i++) {
let bar = document.createElement('div');
bar.className = this.items[i].colour;
bar.style.cssText = `width: ${this.items[i].weight}%`;
bar.setAttribute("mouseover", this.showBlock(500, false)); //not working
document.querySelector('.bar').appendChild(bar);
}
https://jsfiddle.net/phfilly/eywraw8t/167799/
Я пытаюсь добавить событие при наведении курсора мыши (строка 32) на только что созданный элемент. Есть ли другой способ добиться чего-то подобного?
Почему бы вам не использовать Vue для создания элементов для items? Затем вы можете добавить директиву @mouseover.
@saiyan Я тоже пробовал с addEventListener ... все еще нет реакции в методе showBlock.
@juzraai, это хорошая идея, позволь мне попробовать
Разве это не то, чего ты хочешь? jsfiddle.net/n8p917Lr
@Bert Спасибо, сэр, это правильно. Не знаю, что усложнил для себя
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Попробуй это . Я внес некоторые изменения в ваш код jsfiddle.
for (let i = 0; i < this.items.length; i++) {
let bar = document.createElement('div');
bar.className = this.items[i].colour;
bar.style.cssText = `width: ${this.items[i].weight}%`;
// ?
// bar.setAttribute("mouseover", this.showBlock(500, false));
document.querySelector('.bar').appendChild(bar);
}
var that=this;
setTimeout(function(){
document.querySelector('.bar').childNodes.forEach(function(e,y){
e.addEventListener("mouseover", function(){that.showBlock(500, false)});
});},100);
работал у меня в jsfiddle
Проблема:
Посмотрим на проблемную строку:
bar.setAttribute("mouseover", this.showBlock(500, false));
Я вижу следующие проблемы:
- Сначала он вычисляет возвращаемое значение
this.showBlock(500, false), затем устанавливает для него атрибутmouseover. Скорее всего, это значениеundefined, поскольку ваша функция ничего не возвращает. - Значение даже не имеет значения, потому что атрибут
mouseoverне имеет абсолютно никакого значения ни в HTML, ни во Vue, который ищетv-on:mouseoverили@mouseover. - Vue ищет эти атрибуты / директивы только при инициализации, но вы добавляете элементы после инициализации Vue.
Возможные решения:
А) Убедитесь, что ваша модель Vue доступна как глобальная переменная (например, window.app), тогда вы можете проделать трюк с атрибутом HTML onmouseover и преобразованием вызова функции в строку:
bar.setAttribute("onmouseover", "app.showBlock(500, false)");
Б) Добавить прослушиватель событий вместо атрибута. Что-то вроде этого:
bar.addEventListener("mouseover", function () { app.showBlock(500, false); });
Это также требует, чтобы ваш экземпляр Vue был доступен.
См. Полное решение в @ saiyan ответ.
C) Поскольку вы не делаете ничего, что не может сделать Vue, вы можете (и я советую вам) использовать Vue для создания элементов. На мой взгляд, в этом суть Vue - облегчить боль при создании и изменении элементов. Основываясь на вашем процитированном цикле for, реализация Vue будет выглядеть так (в вашем HTML):
<div class = "bar">
<div v-for = "i in items" :class = "i.colour" :style = "{ width: i.weight + '%' }" @mouseover = "showBlock(500, false)"></div>
</div>
Для полного решения, пожалуйста, проверьте @ Скрипка Берта.
Так и должно быть. bar.addEventListener ("наведение указателя мыши", this.showBlock (500, false)); Обычный javascript