Directives issue in vue.js

Published 2 months ago by afoysal

My Html is like below

enter image description here

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

enter image description here

Borisu

So a couple of problems.

  1. 'bind' will only execute your code once. So your event listener will be basically useless. You need 'inserted'.
  2. Make sure that your container div is not "covered" by any other div, or your click event will never get fired.
  3. Remove the quotes from the directive name.
  4. 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 sign in or create an account to participate in this conversation.