Bootstrap，popper.js和vue.js

Question

在我的laravel应用程序中，我有用vue.js呈现的页面。 我想在此页面中添加一些弹出窗口并使用popper.js。 根据文档，此库包含在bootstrap.bundle.min.js中。

我的html页面中有这个：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

我的Vue组件中有以下方法：

        showCalendarChoiceHelpPopover() {
            console.log("click");
            $('#calendar').popover({
                trigger: 'focus',
                title: 'title',
                content: 'content'
            });
        }

加载页面时，出现以下错误消息：

TypeError: __WEBPACK_IMPORTED_MODULE_5_jquery___default(...)(...).popover is not a function

Answer 1

好的朋友，如果您使用Bootstrap 4，则需要包含Popper.js

https://getbootstrap.com/docs/4.0/getting-started/introduction/#js

我们的许多组件都需要使用JavaScript才能起作用。 具体来说，它们需要jQuery，Popper.js和我们自己的JavaScript插件。

并先记住jQuery，然后记住Popper.js，然后记住Bootstrap JS。