CODEWITHSUNDEEP
javascriptvue.js
aquariusGodOfCookier
aquariusGodOfCookier

Reputation: 21

Why is addEventListener not executing

I am using the Vue.js framework, and I am trying to write a demo, and I want to know why the addEventListener function is not executing in my code.

This is for a browser:

 _initEvents(el, attr, callback) {
    this.$el.querySelectorAll(el).forEach(item => {
        if (item.hasAttribute(attr)) {
            callback(item, item.getAttribute(attr))
        }
    })
}
_compile() {
    this._initEvents('*', '@click', (item, key) => {
        console.log(item)
        item.addEventListener('click', ()=> {
            console.log('yes')
        }, false);
    })
}

When I console.log(item), the browser console can press <button @click="test">yes</button>, so the function does exist, and the button is in the DOM.

Why can't item.addEventListener execute and print 'yes'?

Upvotes: 2

Views: 133

Answers (1)

jacob devs
jacob devs

Reputation: 31

After Vue render, '@click' attribute will no longer exists in the DOM. Try an other attribute.

<button @click="test" new:click >yes</button>  

this._initEvents('*', 'new:click', (item, key) => {
    console.log(item)
    item.addEventListener('click', ()=> {
        console.log('yes')
    }, false);
});

Upvotes: 1

Related Questions