Vue template: How to automatically add custom attribute to elements that have a v-on:click directive

Question

We are using single file vue components and in a mousemove event handler we'd like to be able to detect if the target element is clickable.

In our Vue templates we are using v-on directives: v-on:click="someCallback".

Unfortunately there doesn't seem to be an easy way to tell for a given element if an event listener was registered for it (i.e. via v-on directive).

For this we'd like to add a custom attribute to those elements with a v-on:click directve - i.e. "clickable". But this should happen automatically.

So we'd have to either wrap Vue's own "on"-directive into a custom one or somehow hook into Vue's rendering cycle - but this seems not very straight-forward: Couldn't find the directive on the Vue instance or the Vue component object.

What we have tried:

retrieving the information about registered listeners from the target element provided by the event object passed to the event handler. But apparently browsers don't provide this information.
searching the Vue component object for some object that stores information about which event listener has been registered for which element with which handler. We were not able to find this information - but it should be somewhere, right?

Hope anyone has a nice idea on how to accomplish adding a custom attribute to elements with v-on:click directive automatically.

Thanks!

EDIT:
So we have i.e. <div id="x" @click="someMethod" /> in our template. But we want to add a custom attribute automatically (we dont want to add it manually for all the trillion cases): <div id="x" clickable @click="someMethod" /> Then in the event handler for addEventListener('mousemove', handler) we would check for this attribute: if (e.target.hasAttribute('clickable')) But any other way of accomplishing this (so being able to tell inside the handler for mousemove if the element is clickable) would be fine too.

Can you show a use case of what you are trying to achieve? Because it could depend on what you have, the data you are using, etc. Just thinking about it, using a custom directive and refs should do the trick. But as I mentioned please post some example code. — Daniel Grima
– Daniel Grima, Commented Aug 8, 2020 at 16:02

Mark Graham · Accepted Answer · 2020-08-09 15:34:03Z

1

You could create a container component and import it into all your other vue components, ensuring it's the first component in your template, like:

<template>
  <v-container>
    // your template here
  </v-container>
</template>

<script>
// Obviously replace the path and point to your location of the component
import ComponentContainer from './common/ComponentContainer.vue'
export default {
  name: 'MyClientComponent',
  components: {
    'v-container': ComponentContainer
  }
}
</script>

And this is the container component that looks for click events and adds the clickable class:

<template>
  <div class="component-container">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'ComponentContainer',
  mounted() {
    this.$slots.default.forEach(vn => {
      this.addClickableClassNames(vn);
    });
  },
  methods: {
    addClickableClassNames(vnode) {
      if (vnode) {
        let data = vnode.data;
        if (data && data.on) {
          // Check for click events and add a
          // clickable class if one exists
          if (data.on.click && vnode.elm && vnode.elm.classList) {
              vnode.elm.classList.add('clickable');
          }
        }
        // Now recursively check children
        if (vnode.children) {
          vnode.children.forEach(vn => {
            this.addClickableClassNames(vn);
          });
        }
      }
    }
  }
}
</script>

This works, but I wouldn't like to comment on the performance of a large dom. And you, and other devs, need to remember to import into all components, which isn't ideal. But, it's a solution that might give you other ideas on improving and making more scalable.

answered Aug 9, 2020 at 15:34

Mark Graham

1716 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vuelicious Over a year ago

Hey Mark, thanks for this solution! Unfortunately we cant take this approach, The array this.$slots.default only includes the wrapper element of the parent component. And also we cannot change our code base like that. But it's interesting anyway, since I never realized the $slots.default is holding nodes of the virtual DOM, not the actual DOM:)

Mark Graham Over a year ago

No probs, and you're welcome! Hope you solve your problem.

tony19 · Accepted Answer · 2022-07-15 05:14:42Z

0

I can't think of a way to "automatically" add this clickable attribute. I think unfortunately you will still need to "tag" your clickable elements one by one.

I would have a directive which you can add to any element in your templates.

Directive

Vue.directive('myDirective', {
  inserted(el, bindings) {
    el.addEventListener('mouseover', () => {
        alert(bindings.value);
    })
  }
});

Usage

<span v-my-directive="true">Element 1</span>
<span v-my-directive="false">Element 2</span>

You will notice that in the template when using the directive a value is being passed to it. This is then read via bindings.value. Of course based on this value you can do whatever functionality you need.

JSFiddle: https://jsfiddle.net/tc45xf82/2/
Vue Docs: https://v2.vuejs.org/v2/guide/custom-directive.html

edited Jul 15, 2022 at 5:14

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 8, 2020 at 16:41

Daniel Grima

2,8558 gold badges37 silver badges60 bronze badges

1 Comment

vuelicious Over a year ago

Manually I could also do just like this: <span clickable @click="..."> ;)

Collectives™ on Stack Overflow

Vue template: How to automatically add custom attribute to elements that have a v-on:click directive

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related