vue.js - Extend vueJs directive v-on:click -

i'm new vuejs. i'm trying create first app. show confirm message on every click on buttons.

example:

<button class="btn btn-danger" v-on:click="reject(proposal)">reject</button> 

my question is: can extend v-on:click event show confirm everywhere? make custom directive called v-confirm-click first executes confirm , then, if click on "ok", executes click event. possible?

i recommend component instead. directives in vue used direct dom manipulation. in cases think need directive, component better.

here example of confirm button component.

vue.component("confirm-button",{   props:["onconfirm", "confirmtext"],   template:`<button @click="onclick"><slot></slot></button>`,   methods:{     onclick(){       if (confirm(this.confirmtext))         this.onconfirm()     }   }  }) 

which use this:

<confirm-button :on-confirm="confirm" confirm-text="are sure?">   confirm </confirm-button> 

here example.

console.clear()    vue.component("confirm-button", {    props: ["onconfirm", "confirmtext"],    template: `<button @click="onclick"><slot></slot></button>`,    methods: {      onclick() {        if (confirm(this.confirmtext))          this.onconfirm()      }    }    })    new vue({    el: "#app",    methods: {      confirm() {        alert("confirmed!")      }    }  })

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>  <div id="app">    <confirm-button :on-confirm="confirm" confirm-text="are sure?">      confirm    </confirm-button>  </div>