Question

我正在尝试在引导模式视图中打开外部页面。如果“打开模式”按钮处于正常div中，则工作正常。但是如果按钮位于div内部（可通过vuejs访问），则modal正在打开，但页面不再加载。

这是我的代码

 <div id="abc">
    <button type="button" class="btn btn-primary" href="http://bing.com" data-toggle="modal" data-target="#myModal">
        Open modal1
    </button> <!-- this modal works perfectly and load bing webpage -->
</div>

    <div id="products">         
        <div class="row">
            <div v-for="product in allproducts" class="col-md-4 col-sm-12">
                Price:{{product.price}}
                <button type="button" class="btn btn-primary" v-bind:href="'http://bing.com'" data-toggle="modal" data-target="#myModal">
                    Open Modal 2 
                </button> <!-- on click, modal view is opening but bing webpage is not loading-->
            </div>              
        </div>
    </div>

    <!-- The Modal -->
    <div class="modal" id="myModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>



    <script>
     $('button.btn.btn-primary').on('click', function(e) {
                e.preventDefault();
                var url = $(this).attr('href');
                $(".modal-body").html('<iframe width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency="true" src="'+url+'"></iframe>');
            });

    new Vue({

        el: '#products',
        data: {
            allproducts : myJsonData,
            deviceType:myDeviceType,
        },

        methods: {
            submitValue: function(event){
            },
        },
    });

    </script>

有什么主意吗？

Answer 1

好的解决方案：由于我使用v-bind调用按钮，因此触发函数应该在vue js的内部方法中：所以我以这种方式替换了按钮

<input class="btn btn-primary" type="button" value="Click it!" v-on:click="selectProduct(product.id+'.png');" data-toggle="modal" data-target="#myModal"/>

在脚本中，我们不再需要$('button.btn.btn-primary').on('click', function(e) { .....}。而是在vue内编写一个方法

selectProduct: function(id){
                        var url = "/abc.html?myselection="+id; //or anyother html page
                        $(".modal-body").html('<iframe width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency="true" src="'+url+'"></iframe>');

                    }

模态视图+ vuejs中的外部页面加载

1 个答案: