How To Add Vue Js Functions To Jquery Dynamically

I am using a reusable bootstrap modal i.e same modal for edit, delete operations. When edit or update buttons are clicked same modal will pop up and I need to append appropriate fu

Solution 1:

I'm not sure to quite understand your question, but here is how I've done it:

I have a Modal component:

Modal.vue:

<divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close" @click="close()"><spanaria-hidden="true">×</span></button><h4class="modal-title">
            {{ title }}
        </h4></div><divclass="modal-body"><slot></slot></div><divclass="modal-footer"><buttontype="button"class="btn btn-default" @click="close()">Fermer</button><buttontype="button"class="btn btn-primary" @click="save()":disabled="loading"><iclass="fa fa-spin fa-spinner"v-if="loading"></i>Confirmer</button></div></div>

And:

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

As you can see, I take a save and close method in argument of the Modal component.

Then, when I call the component from another one, I send the methods as parameters:

Parent.vue:

<modal v-show="showModal" title="Ajouter une adresse" :save="saveAddress" :close="hideModal" :loading="savingNewAddress">
    My Modal content here
</modal>

export default {
    data () {
        return {
            this.showModal = false;
        }
    },
    methods: {
        saveAddress () {
            console.log('fired from my parent component');
        },
        hideModal () {
            this.showModal = false;
        },
        displayModal () {
            this.showModal = true;
        }
    },
    components: {
        Modal
    }
}

I hope this helps!