Directives

Asked

Viewed 160 times

0

How to build a Custom Directive that works like v-on?

Briefly the directive needs to have the same functionality as the v-on:click

I tried things like:

//App.vue:
<h1 v-arthur:click="myfunction">Directives Exercise</h1>

//main.js:
Vue.directive('arthur', {
  myfunction(){
    alert('minha diretiva personalizada v-on funcionou!');
  }
});

<script>
    export default {
        methods: {
            myfunction();
        }
    }
</script>

But it wasn’t, because I don’t know how to do, it’s wrong to call a function within methods, but I’ve tried everything, someone can help me?

javascript vue.js onclick vue.js-2

  • Man, that’s just not possible, like it’s out of character what you’re trying to do. Custom directives do not work that way and were not created to do so.

  • I’m taking a course at udemy and has some exercises... In one of them has the following activity " Build a Custom Directive that works as v-on (Listen to Events)"

  • Maybe I misunderstood but from what I understand, it is to make a directive that has the same functionality as v-on ........

  • Well, I don’t see how to do it, and if there is, it’s a scam. But if it’s done you can post the code as an answer if anyone has any similar questions.

2 answers

3

Edit01 If I understand what you need, we have this in the Vuejs documentation

https://br.vuejs.org/v2/guide/custom-directive.html

It would be something like this:

<div v-arthur="{ color: 'green', text: 'Verde' }"></div>


Vue.directive('arthur', function (el, binding) {
  console.log(binding.value.color)
  console.log(binding.value.text)
})

I didn’t notice you wanted to make a specific v-on

Here is an example from CodePen.

https://codepen.io/anon/pen/xoXWgL?editors=1111

Description:

<div id="el">
  <button v-dup:click="alertMe">BlaBlaBla</button>
</div>

Directive

Vue.directive('dup', {
   bind(el, binding) {
     let type = binding.arg
     let myFunction = binding.value
     el.addEventListener(type, myFunction)
  }
})

Here you do the ligament, getting the element.

 bind(el, binding)

Here you take the function you are passing as argument.

 let myFunction = binding.value

Then connect the function to the element.

el.addEventListener(type, myFunction)

  • I think it’s not quite what he needs, he wants to perform the click action through the directive.

  • But it is only to modify for as you want, to pass the event of Click, and to attach it to a function, Perai I will do in a codePen. (If that’s what he really wants)

0


The solution is this

<template>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                <h1>Directives Exercise</h1>
                <!-- Exercise -->
                <!-- Build a Custom Directive which works like v-on (Listen for Events) -->
                <button v-customOn:click="clicked" class="btn btn-primary">Click Me</button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        directives: {
            customOn: {
                bind(el, binding) {
                    el.onclick = function() {
                        binding.value();
                    }
                }
            }
        },
        methods: {
            clicked() {
                alert('I was clicked!');
            }
        }
    }
</script>

<style>
</style>

  • Sorry I didn’t understand, there is some difference of the solution that I informed you ?

Browser other questions tagged javascript vue.js onclick vue.js-2

You are not signed in. Login or sign up in order to post.