javascript - How to add vue js functions to jquery dynamically -

i using reusable bootstrap modal i.e same modal edit, delete operations.

when edit or update buttons clicked same modal pop , need append appropriate functions modal footer buttons according operation is.

my footer buttons like,

 <div class="modal-footer">    <button class="btn actionbtn" data-dismiss="modal">      <span id="footer_action_button" class='glyphicon'> </span>    </button>    <button class="btn btn-warning" data-dismiss="modal">      <span class='glyphicon glyphicon-remove'></span> close    </button>  </div> 

when edit button clicked,

    $(document).on('click', '.edit-modal', function() {         $('#footer_action_button').text(" update");         $('#footer_action_button').addclass('glyphicon-check');         $('#footer_action_button').removeclass('glyphicon-trash');         $('.actionbtn').addclass('btn-success');         .....         ......         $('#mymodal').modal('show');         $('.actionbtn').click(updateoperation);     }); 

similarly delete action too..

here $('.actionbtn').click(updateoperation); work normallly.

but here updateoperation vuejs function,

    methods: {             updateoperation: function () {             .....             .....         },    } 

i unable call update operation.

when statically adding @click="updateoperation()", works fine.

<button class="btn actionbtn" data-dismiss="modal"  @click="updateoperation()">               <span id="footer_action_button" class='glyphicon'> </span> </button> 

i'm not sure quite understand question, here how i've done it:

i have modal component:

modal.vue:

<div class="modal-content">     <div class="modal-header">         <button type="button" class="close" @click="close()">             <span aria-hidden="true">×</span>         </button>         <h4 class="modal-title">             {{ title }}         </h4>     </div>     <div class="modal-body">         <slot></slot>     </div>     <div class="modal-footer">         <button type="button" class="btn btn-default" @click="close()">fermer</button>         <button type="button" class="btn btn-primary" @click="save()" :disabled="loading"><i class="fa fa-spin fa-spinner" v-if="loading"></i>confirmer</button>     </div> </div> 

and:

export default {     props: ['title','save','close','loading'] } 

as can see, take save , close method in argument of modal component.

then, when call component one, send methods parameters:

parent.vue:

<modal v-show="showmodal" title="ajouter une adresse" :save="saveaddress" :close="hidemodal" :loading="savingnewaddress">     modal content here </modal>  export default {     data () {         return {             this.showmodal = false;         }     },     methods: {         saveaddress () {             console.log('fired parent component');         },         hidemodal () {             this.showmodal = false;         },         displaymodal () {             this.showmodal = true;         }     },     components: {         modal     } } 

i hope helps!