Vue.js VueJS：引导/jQuery脚本中的调用函数包含在组件的模板/布局中_Vue.js_Bootstrap 4

Vue.js VueJS：引导/jQuery脚本中的调用函数包含在组件的模板/布局中

vue.js bootstrap-4

Vue.js VueJS：引导/jQuery脚本中的调用函数包含在组件的模板/布局中,vue.js,bootstrap-4,Vue.js,Bootstrap 4,我是VueJS的新手，希望为现有的引导模板（SB Admin Pro）构建一个管理仪表板。我知道有一个BootstrapVUE，但我们想使用我们以前购买的指定模板。所以这不是我/我们的选择我的目标：在我们的vue组件中，我们对后端进行axios调用，以检索和显示一些数据。如果调用失败，我们希望在catch块中调用toast的bootstrap函数，以向用户显示一些通知（例如：从后端获取数据时出错…）。我们将模板中的引导和jquery库包含在default index.html中问题：我不

我是VueJS的新手，希望为现有的引导模板（SB Admin Pro）构建一个管理仪表板。我知道有一个BootstrapVUE，但我们想使用我们以前购买的指定模板。所以这不是我/我们的选择

我的目标： 在我们的vue组件中，我们对后端进行axios调用，以检索和显示一些数据。如果调用失败，我们希望在catch块中调用toast的bootstrap函数，以向用户显示一些通知（例如：从后端获取数据时出错…）。我们将模板中的引导和jquery库包含在default index.html中

问题： 我不知道如何从vue组件调用toasts（或其他）函数。在模板中，调用如下所示：

$（“toastBasic”）.toast（“show”）
我们的index.html看起来
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="svote UG (haftungsbeschränkt)" />
    <script data-search-pseudo-elements defer src="js/font-awesome-5.11.2.min.js" crossorigin="anonymous"></script>
   <script src="./js/feather.min.js" crossorigin="anonymous"></script>

  </head>
  <body class="nav-fixed">
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">

    </div>
    <!-- built files will be auto injected -->
    <script defer src="js/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
    <script defer src="js/bootstrap.min.js" crossorigin="anonymous"></script>
    <script defer src="js/script.js"></script>


  </body>
</html>



很抱歉，如果未启用JavaScript，则无法正常工作。请使其继续。

我们的vue组件：
<template>
  <main>
<div style="position: absolute; top: 1rem; right: 1rem;">
    <!-- Toast container -->
    <div style="position: absolute; bottom: 1rem; right: 1rem;">
        <!-- Toast -->
        <div class="toast" id="toastBasic" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
            <div class="toast-header">
                <i data-feather="bell"></i>
                <strong class="mr-auto">Toast with Autohide</strong>
                <small class="text-muted ml-2">just now</small>
                <button class="ml-2 mb-1 close" type="button" data-dismiss="toast" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="toast-body">This is an example toast alert, it will dismiss automatically, or you can dismiss it manually.</div>
        </div>
    </div>

</div>
    <ContentHeader title="Blank" icon="fas fa-file" subtitle="A blank page to get you started!" />
    <div class="container-fluid mt-n10">
      <div v-if="error" class="alert alert-danger" role="alert">
        {{ error }}
      </div>
      <div class="row">
        <Card cHeader="Eine Karte" class="col-md-12"> {{ contacts }}</Card>
      </div>
    </div>
  </main>
</template>

<script>
  import ContentHeader from '../../components/ContentHeader'
  import Card from '../../components/Card'
  import axios from 'axios';

  export default {
    name: "Contact",
    components: {
      ContentHeader,
      Card,

    },
    data() {
      return {
        contacts: null,
        error: null
      }
    },
    mounted() {
        const url = 'http://localhost:3000/v1/';
         axios.get(url + 'contsact')
            .then(response => {
              this.contacts = response.data
               console.log(response)}
            )
            .catch(error => {
                 console.log(error.response)
                $("#toastBasic").toast("show");
            });

    }
  }
</script>

configureWebpack: {
  externals: {
    jquery: 'window.jQuery'
  }
}


带自动隐藏的吐司
刚才
×
这是一个toast警报示例，它将自动解除，也可以手动解除。
{{error}}
{{contacts}}
从“../../components/ContentHeader”导入ContentHeader
从“../../components/Card”导入卡
从“axios”导入axios；
导出默认值{
姓名：“联系人”，
组成部分：{
ContentHeader，
卡片
},
数据（）{
返回{
联系人：空，
错误：null
}
},
安装的（）{
常量url=http://localhost:3000/v1/';
get（url+'contsact'）
。然后（响应=>{
this.contacts=response.data
console.log（响应）}
)
.catch（错误=>{
console.log（error.response）
美元（“#toastBasic”）。土司（“show”）；
});
}
}
您可以获取元素的ref并将其传递给jQuery


import$from'jQuery'；
$（本.$参考文献。吐司）。吐司（“展示”）；

但是我不建议这样做。
在vue.config.js
中，将jquery
指定为外部（这会告诉webpack在任何组件中导入时从何处提供jquery
）：
将Vue inits时间之前要加载的所有
放在public/index.html
页面的
标记中，并删除它们的延迟属性。这包括您可能希望在Vue应用程序中使用的任何jquery插件（或任何需要/扩展jquery的插件）（在您的示例中是，bootstrap.min.js
）
以上将使其在开发（服务）时起作用。在初始化Vue应用程序之前，您需要对prod:Load jquery和任何依赖项执行相同的操作
现在您可以安全地使用
import * as $ from 'jquery' 

在任何组件中
Webpack将放在$
任何窗口中。jQuery
是组件初始化的时刻

上述方法确保在Vue inits之前加载所有必需的脚本（这有点极端，但它确保在加载依赖项之前无法调用jquery方法）
如果您不想在启动Vue应用程序之前等待jquery
和bootstrap.min.js
加载，您可以使用的一个技巧是在需要jquery之前从window
对象分配它：
yourAlertMethod() {
  const $ = window.jQuery;
  $.toast()...
}

显然，您不再需要移动
中的所有脚本并删除它们的延迟
。第二种方法不能保证它们在您的方法首次使用之前已经加载。但你的应用程序启动速度更快

这是一个。

我使用了第二种方法，codesandbox.io
不支持@vue/cliv3
，因此vue.config.js
与使用vue create
创建的vue项目不一样。因此，我不得不使用第二种方法
调用$（el）.toast（）方法之前需要加载的依赖项的完整列表：

bootstrap.min.css
jquery.js
popper.js
bootstrap.min.js

（请参见public/index.html
中的内容）。您可以从中复制/粘贴它们。
感谢您的快速响应！！我试过了，但没用。我在控制台中遇到了以下错误：TypeError:jquery\uuu WEBPACK\u IMPORTED\u MODULE\u 3\uuuu\u默认值（…）（…）。toast不是一个函数
wird，它是什么意思console.log（this.$refs）显示？是否还需要导入bootstrap.min.js？因为toast函数在这个文件中，所以，$.toast（）
是一个引导JS插件，扩展了jQuery：好的，现在我在日志消失器中做了更改和错误。但是当我打电话进来时，祝酒词没有出现```在my Component的mounted函数中，您确定DOM中存在具有id=“toastBasic”
的元素吗？同样，您确定只有一个元素具有此id
？它是有效的toast元素吗？如果你能提供帮助，我可以进一步帮助你。正如你在我的第一篇文章中看到的，这行代码看起来像这样