Можно ли инициировать события с помощью Vue.js?

Я только что начал использовать Vue.js и постоянно переключаюсь на jQuery, чтобы помочь в определенных ситуациях. Совсем недавно я пытался, безуспешно "запускать" (или эмулировать) событие, например, событие click или blur.

Я знаю, что в jQuery вы можете сделать следующее:

$('#my-selector').trigger('click');

Но как это может быть достигнуто с помощью Vue.js? Я хочу как можно больше отказаться от использования jQuery.

Приведем ниже пример:

<div id="my-scope">
    <button type="button" v-on="click: myClickEvent">Click Me!</button>
</div>

<script>
new Vue({
    el: "#my-scope",
    data: {
        foo: "Hello World"
    },
    methods: {
        myClickEvent: function(e) {
            console.log(e.targetVM);
            alert(this.foo);
        },
        anotherRandomFunciton: function() {
            this.myClickEvent();
        }
    }
});
</script>

Если бы мне пришлось вызвать anotherRandomFunciton, я бы хотел, чтобы он эмулировал (или запускал) вышеупомянутое событие click. Тем не менее, я пытаюсь это событие (или e в приведенном выше примере) никогда не передается функции.

У Vue.js есть метод для достижения этого?

Ответ 1

Вам нужно получить ссылку на свою кнопку, используя v-el например:

<button type="button" @click="myClickEvent" v-el:my-btn>Click Me!</button>

Затем в вашем методе:

function anotherRandomFunction() {
    var elem = this.$els.myBtn
    elem.click()
}

Это просто встроенное событие щелчка DOM. См. Документацию v-el

Или с Vue 2.x:

<template>
    <button type="button" @click="myClickEvent" ref="myBtn">
        Click Me!
    </button>
</template>

<script>
export default {
    methods: {
        myClickEvent($event) {
            const elem = this.$refs.myBtn
            elem.click()
        }
    }
}
</script>

Поскольку Vue использует и прослушивает только собственные DOM-события. Вы можете запускать собственные события DOM с помощью Element#dispatchEvent так:

var elem = this.$els.myBtn; // Element to fire on

var prevented = elem.dispatchEvent(new Event("change")); // Fire event

if (prevented) {} // A handler used event.preventDefault();

Это не совсем идеальная или лучшая практика. В идеале у вас должна быть функция, которая обрабатывает внутренности и обработчик событий, который вызывает эту функцию. Таким образом, вы можете звонить внутренним, когда вам нужно.

Ответ 2

Если кто-то наткнулся на это, вот как я это сделал:

При использовании this.$refs.myBtn.click()

я получил

"Uncaught TypeError: this. $ Refs.myBtn.click не является функцией"

Изменил это на: this.$refs.myBtn.$el.click()

Чтобы было понятно: для работы нужно добавить " $el ".

Ответ 3

Vue по своей природе узконаправлен - он предназначен для использования с ним других пакетов, таких как jQuery (EDIT: для функций jQuery, отличных от манипуляций с DOM). Я думаю, что использовать JQuery trigger просто отлично.

Однако, если вы хотите создать свои собственные события без jQuery, посмотрите dispatchEvent:

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent

Или, для конкретного случая щелчка, есть метод для элементов DOM, который вы можете использовать:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click