Question

我正在尝试显示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>

以上代码无法正常工作，但是当我尝试在HTML入口点添加jQuery和bootstrap时。

<!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软件包的编译版本。

这有效，但是当我从html部分删除bootstrap和jquery时，它不起作用。问题不仅在于modal，而且还使用了bootstrap plugin之类的daterange-picker，例如当我保留HTML中的bootstrap 3.4.0脚本标记时，bootstrap plugin不会显示脚本标记仅显示模式，而不显示通过npm安装的其他Bootstrap 3.4。

我可以看到其纯粹的版本冲突，其中模态仅显示为Bootstrap 4版本，而不显示为showDetails(){ $('#interactionDetails_modal').modal('toggle'); // rest part... }版本。所以我尝试通过jQuery强制执行：

export const Save = ({ NewName }) => {

  var db = firebase.firestore()

  var batch = db.batch();

  var sfDocRef = db.collection("cities").where("state", "==", "boston");
  var sfRe = db.collection("country").doc("SF");

     return () => {

        batch.update(sfDocRef, {"state": NewName})
        batch.update(sfRe, {"state": NewName})

        batch.commit()
  }
}

但是没有运气。

帮我解决这个问题。

Vue.js组件中的Bootstrap模态

0 个答案: