Bootstrap модальный в компоненте vuejs - PullRequest
Новая
       59

Bootstrap модальный в компоненте vuejs

0 голосов
/ 23 сентября 2019

Я пытаюсь показать bootstrap модал.Я использую предварительно созданную тему и строю ее на Vuejs.Таким образом, мой package.json файл имеет следующее devDependencies: 

"devDependencies": {
    "axios": "^0.19",
    "bootstrap": "^4.0.0",
    "cross-env": "^5.1",
    "jquery": "^3.4.1",
    "laravel-mix": "^4.0.7",
    "lodash": "^4.17.15",
    "popper.js": "^1.12",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.20.1",
    "sass-loader": "^7.1.0",
    "vue": "^2.5.17",
    "vue-template-compiler": "^2.6.10"
},

Я хочу отобразить мой bootstrap модальный в одном из компонентов. 

<template>
    <div>
        <!-- Few of the data code -->
        <div class="kt-timeline-v1__item-actions">
            <a href="#" class="btn btn-label btn-bold btn-sm" data-toggle="modal" data-target="#interactionDetails_modal" @click.prevent="showDetails()">Show more ...</a>
        </div>

        <div class="modal fade" id="interactionDetails_modal'" tabindex="-1" role="dialog" aria-labelledby="interactionDetails" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="interactionDetailsLabel">
                            Interaction Details
                        </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">
                                &times;
                            </span>
                        </button>
                    </div>
                    <div class="modal-body" v-if="!loading">
                       ,!-- Body details --> 
                    </div>
                    <div v-else class="text-center">
                        Fetching Data!!
                    </div>
                    <div class="modal-footer">
                        <span class=""><button type="button" data-dismiss="modal" class="btn btn-primary" @click="redirect()">Show More</button></span>
                        <span class=""><button type="button" class="btn btn-white" data-dismiss="modal">Close</button></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: "meeting-component",
        data(){
            return{
                loading: false,
                //data set used...
            }
        },
        methods:{
            redirect(){
                //redirects or link to different page...
            },
            showDetails(){
                this.loading = true
                // api calls....
            }

        }
    }
</script>

Выше код не работает, но когда я попытался добавить jQuery и bootstrap в моей точке входа HTML. 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML Title.</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

        <link rel="icon" type="image/png" sizes="16x16" href="/logo/bx_logo.png">
        <meta name="description" content="Login Page">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <meta name="csrf-token" content="{{ csrf_token() }}">

        <!--begin::Web font -->
        <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
        <script>
            WebFont.load({
                google: {"families":["Poppins:300,400,500,600,700","Roboto:300,400,500,600,700"]},
                active: function() {
                    sessionStorage.fonts = true;
                }
            });
        </script>

    </head>
    <body>

        <div id="app"></div>

        <!-- Global User data object end -->

        <script src="{{ mix('app.js') }}"></script>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

    </body>
</html>

app.js - это скомпилированная версия моих пакетов npm.

Это сработало, но когдаЯ удаляю bootstrap и jquery из html части, это не работает.Проблема не только в modal, я использую некоторые из bootstrap plugin как daterange-picker, которые не отображаются, когда я сохраняю тег bootstrap 3.4.0 script из HTML, когда я сохраняю теги script, он отображает только модальныйдругой bootstrap plugin, который был установлен через npm.

Я вижу только его конфликт версий, когда модальный отображается только для Bootstrap 3.4 версии, а не отображается Bootstrap 4 версии.Поэтому я попытался форсировать через jQuery: 

showDetails(){
    $('#interactionDetails_modal').modal('toggle');
    // rest part...
}

Но не повезло.

Помогите мне с этим.

...