[Vuejs]-How to add vue js functions to jquery dynamically

by

0👍

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

I have a 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 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!

👤Hammerbot

Leave a comment