如何将vue js函数动态添加到jQuery [英] 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 functions to the modal footer buttons according which operation it is.

我的页脚按钮就像

 <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>

当点击编辑按钮时，

    $(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 for delete action too..

在这里$('.actionBtn').click(updateOperation);可以正常工作.

但是这里的updateOperation是一个vueJs函数，

but here updateOperation is a vueJs function,

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

我无法调用此更新操作.

I am unable to call this update operation.

静态添加@click="updateOperation()"时，效果很好.

When statically adding @click="updateOperation()", it works fine.

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

推荐答案

我不确定您是否很了解您的问题，但这是我的解决方法:

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

我有一个模态组件:

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>

并且:

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

如您所见，我在Modal组件的参数中采用了save和close方法.

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
    }
}

我希望这会有所帮助！

这篇关于如何将vue js函数动态添加到jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！