Using VueJS to create a custom directive that takes a function as an

Question

Using VueJS to create a custom directive that takes a function as an

So here's the scenario:

HTML:

<div id="app">
  <div v-sample:callback="greet"></div>
</div>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      files: [],
    },
    methods: {
      greet: function (arg) {
        alert(arg);
      },
    },
  });
</script>

JS:

Vue.directive('sample', {
  bind: function (el, binding, vnode) {
    el.addEventListener('...', function () {
      // ...
      callback.call(arg, ...);
    });
  },
});

But I'm stuck on how to properly access and evaluate the function. What is the correct syntax for doing this within a directive?

javascript vue.js

Answer 1

Answer №1

If you want to execute a function in Vue, utilize the binding.value property which should contain the function. It is already bound to the correct context, so simply call it (you can pass any arguments inside if needed):

Vue.directive('example', {
  bind: function (el, binding, vnode) {
    el.addEventListener('click', function () {
      binding.value()
    });
  },
});

Answer 2

If you want to execute a function in Vue, utilize the binding.value property which should contain the function. It is already bound to the correct context, so simply call it (you can pass any arguments inside if needed):

Vue.directive('example', {
  bind: function (el, binding, vnode) {
    el.addEventListener('click', function () {
      binding.value()
    });
  },
});

Answer 3

Answer №2

Currently developing with Nuxt3 and Vue3


    // Implementing this module within defineNuxtPlugin config (client side)
    export default (vueInstance) => {
      
      // Handling click events outside of specified element
      vueInstance.directive('click-outside', {
        created(el, binding, vnode, prevVnode) {
          el.clickOutsideEvent = function (event) {
            console.log(binding.instance.close)
            if (!(el == event.target || el.contains(event.target))) {
              if(binding.instance[binding.value]) {
                binding.instance[binding.value](event)
              }
            }
          }
    
          document.body.addEventListener('click', el.clickOutsideEvent)
        },
        beforeUnmount(el, binding, vnode, prevVnode) {
          document.body.removeEventListener('click', el.clickOutsideEvent)
        }
      })
    
    }


<div v-click-outside="'close'">

</div>

Answer 4

Currently developing with Nuxt3 and Vue3


    // Implementing this module within defineNuxtPlugin config (client side)
    export default (vueInstance) => {
      
      // Handling click events outside of specified element
      vueInstance.directive('click-outside', {
        created(el, binding, vnode, prevVnode) {
          el.clickOutsideEvent = function (event) {
            console.log(binding.instance.close)
            if (!(el == event.target || el.contains(event.target))) {
              if(binding.instance[binding.value]) {
                binding.instance[binding.value](event)
              }
            }
          }
    
          document.body.addEventListener('click', el.clickOutsideEvent)
        },
        beforeUnmount(el, binding, vnode, prevVnode) {
          document.body.removeEventListener('click', el.clickOutsideEvent)
        }
      })
    
    }


<div v-click-outside="'close'">

</div>

Answer 5

Answer №3

Here is an example of how you could approach this.

<div v-customdirective:fn="params"></div>

Vue.directive('customdirective', {
    bind (el, binding,vnode) {
        let instance = vnode.context
        instance[binding.arg](binding.value)
    }
})

Answer 6

Here is an example of how you could approach this.

<div v-customdirective:fn="params"></div>

Vue.directive('customdirective', {
    bind (el, binding,vnode) {
        let instance = vnode.context
        instance[binding.arg](binding.value)
    }
})

Using VueJS to create a custom directive that takes a function as an

Answer №1

Answer №2

Answer №3

Similar questions

When initiating a new browser window with JQuery, some data is not being transmitted

Transform array elements into objects with associated indices and data types

While transitioning from vue2.x to vue3.x, came across an unexpected mutation of the "task" prop in the v-model module

What is the best way to identify when a disabled button is clicked on in JQM?

Unconventional JavaScript Variable Declaration

Assistance with jQuery in Javascript is needed

Combining Typescript, Javascript, and Dart in Angular 2

Can we stop Angular components from being destroyed during navigation?

Streaming large files with Node.js can lead to significant memory consumption and potential memory errors like OOM

Is there a way to create a fading effect for background images using jQuery?

What is the best method for users to add a div element and its contents?

Loading Embedded Content with ReactJS

What is the best way to separate each quiz question and its corresponding choices into individual pages using React with Axios?

Ways to update the color of text exceeding the block boundaries: JavaScript and CSS

Exploring Angular Factory: Creating the getAll method for accessing RESTful APIs

The reason behind the creation of .pnp.loader.mjs and .pnp.cjs files by yarn

The mobile button bar on iPhone is shown when scrolling or jumping up to the anchor, but it doesn't actually scroll or jump to the

Angular Redirect Function: An Overview

Creating a curved exponential data set with specific endpoints and a set number of data points

Customize your header and footer for printing to display on each page