更新1

Question

首先，我有一个像下面这样的Vue元素

var exampleModal = new Vue({
    el: '#exampleModal',
    data: {
        name: '',
        sat: '',
        koef: 0,
        description: '',
        index: 0,
        index1: 0,
        type: 'edit',
        arr_sub_group: [],
        sub_group: '',
    },
    created() {
        console.log('Vue instance was created');
        // @foreach($arr_sub_group as $sub_group)
    }
})

与此HTML元素绑定

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document"></div>
</div>

上面的代码运行良好。但是，我想从非Vue函数（从香草javascript / jquery）中调用该模式作为波纹管

<li>
    <a class="text-grey" href="#" id="new-list" onClick="add_modal(); return false;">
        <img src="{{ url('images/plus.png') }}" width="40"><br>
        New List
    </a>
</li>

function add_modal() {
    console.log("call")
    exampleModal.type = 'add'
    exampleModal.reset()
    $('#exampleModal').modal('show')
}

第一次单击时，将触发add_modal功能。其由日志call指示。但是没有显示exampleModal。需要再次单击才能显示#exampleModal。

所以我尝试使用这种方法

function add_modal() {
    console.log("call")
    exampleModal.type = 'add'
    exampleModal.reset()
    $("#exampleModal").unbind('click');
    $('#exampleModal').modal('show');
}

上面的代码无法正常运行。所以我尝试使用下面的代码

<a class="text-grey" href="#" id="new-list" v-on:click=>
    <img src="{{ url('images/plus.png') }}" width="40"><br>
    New List
</a>

new Vue({
    el: '#links',
    methods: {
        addModal: function () {
            console.log("call")
            exampleModal.type = 'add'
            exampleModal.reset()
            $('#exampleModal').modal('show');
        }
    }
});

，它仍然不起作用。我什至尝试使用JQuery仍然无法正常工作

$("#new-list").unbind('click');
$("#new-lis").on('click', function () {
    exampleModal.type = 'add'
    exampleModal.reset()
    $('#exampleModal').modal('show')
});

所以我在互联网上进行挖掘，发现了我的案子的问题。我认为这是由于Vue Element与Vanilla javascript事件监听器之间的双重绑定引起的。因此，我尝试将Vue元素上的el更改为波纹管

<script type="text/javascript">
    var exampleModal = new Vue({
        el: '#exampleModal',

瞧！它现在正在工作。上面的解决方案将仅通过单击来显示exampleModal。但这不是我想要的解决方案，因为Vue方法在这里不起作用。

我需要一个更好的解决方案，既可以使用Vue元素也可以显示我的模态。

更新1

我正在解决解决方案

    $("#new-list").unbind('click');
    $("#new-list").on('click', function() {
        exampleModal.type = 'add'
        exampleModal.reset()
        $('#exampleModal').modal('show')
    }); 

    $(document).ready(function(){
        $("#new-list").trigger("click");
    });

再次

，它只是解决方案。有更好的主意吗？

如果您有任何建议或想法，请告诉我。提前致谢。

将Vue元素与Javascript元素绑定

更新1

0 个答案: