Directives issue in vue.js

My Html is like below

I wrote below code

directives: {
            'click-outside': {
                bind: function(el, binding, vNode) {

               var div = document.getElementsByClassName("container");

                    div[0].onclick = function(e) {
                        console.log('hello');
                    }

                }    
            }
        }

I am getting below error

Borisu

8 years ago

Level 37

So a couple of problems.

'bind' will only execute your code once. So your event listener will be basically useless. You need 'inserted'.
Make sure that your container div is not "covered" by any other div, or your click event will never get fired.
Remove the quotes from the directive name.
There is a different syntax for directives when using a component and when defining them globally. Check the documenatation: https://vuejs.org/v2/guide/custom-directive.html

Please or to participate in this conversation.