загрузка внешней страницы в модальном представлении + vuejs - PullRequest
Новая
       18

загрузка внешней страницы в модальном представлении + vuejs

0 голосов
/ 28 ноября 2018

Я пытаюсь открыть внешнюю страницу в режиме начальной загрузки.Он работает нормально, если кнопка «Открыть модал» находится в нормальном режиме.Но если кнопка находится внутри элемента 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>

Есть идеи?

1 Ответ

0 голосов
/ 28 ноября 2018

Получено решение: так как я вызываю кнопку с помощью 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>');

                    }
...