时间戳

首页 > 解决方案 > 模态视图中的外部页面加载+ vuejs

vue.js - 模态视图中的外部页面加载+ vuejs

问题描述

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

这是我的代码

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

任何想法？

标签： vue.jspageloadmodal-view

解决方案

得到解决方案：当我用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>');

                    }

推荐阅读