Answer the question
In order to leave comments, you need to log in
How to emulate a click on an element after it has been rendered?
Good day dear!
Can you please tell me how to correctly "call" click () on an element after it has been rendered?
The essence of the problem, and my attempts to solve it:
methods: {
clickFunction() { //Функция которая "эмулирует" событие "click"
document.querySelector('#myInput').click(); //Вот так - всё работает, проблема только в том, что в этот момент времени элемент ещё не успел отрендерится, по этому "кликать некуда"
//Порывшись в документации VueJS нашел вот такое "решение":
this.$nextTick(function() {
document.querySelector('#myInput').click(); //Не работает
}
//Нашел некий "костыль" призванный исправить сие
setTimeout(function () {
document.querySelector('#myInput').click(); //Но... он тоже не работает
}, 0); //И если добавить времени, например 500 или 1000мс - он тоже не работает
}
}
this.$refs
also tried it, the effect is similar (does not work). methods: {
async clickFunction() {
await this.$nextTick();
document.querySelector('#myInput').click(); //Так работать не будет, но если бы функция не была асинхронной - всё бы работало исправно
}
}
Answer the question
In order to leave comments, you need to log in
You can try using the mounted
component's lifecycle hook .
To generate an event, you need to use the dispatchEvent method in which to pass an event of the desired type created using the constructor .
Example
The element - presented in the example - is a FileInput (you need to click on it to bring up the file selection dialog)
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question