gpt4 book ai didi

javascript - 如何动态添加vue js函数到jquery

转载 作者:行者123 更新时间:2023-11-28 05:34:23 24 4
gpt4 key购买 nike

我正在使用可重用的引导模式,即用于编辑、删除操作的相同模式。

当单击编辑或更新按钮时,将弹出相同的模式,我需要根据其操作将适当的功能附加到模式页脚按钮。

我的页脚按钮就像,

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

删除操作也类似..

此处 $('.actionBtn').click(updateOperation); 可以正常工作。

但是这里 updateOperation 是一个 vueJs 函数,

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

我无法调用此更新操作。

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

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

最佳答案

我不太明白你的问题,但我是这样做的:

我有一个模态组件:

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 组件的参数中采用了保存和关闭方法。

然后,当我从另一个组件调用该组件时,我将方法作为参数发送:

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

希望这会有所帮助!

关于javascript - 如何动态添加vue js函数到jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39464251/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com