Nuxtjs toastr 和数据表插件在 adminLTE - 3 模板中不起作用

Posted 2023-02-22

【中文标题】Nuxtjs toastr 和数据表插件在 adminLTE - 3 模板中不起作用

【英文标题】：Nuxtjs toastr and datatable plugins not working from adminLTE - 3 template

【发布时间】：2020-09-23 18:00:10

【问题描述】：

我有一个全新安装的 nuxtJs 项目。我通过npm 将 adminLTE 集成到其中。我没有安装任何 UI 框架，因为 adminLTE 使用 bootstrap4 和 jquery。但是当我使用 adminLTE 插件时，有些不起作用，有些不会像 toastr 和数据表那样显示。我的package.json 中没有任何 jquery。有人能告诉我我做错了什么吗？谢谢。

我的 nuxt 配置

 head: 
    title: process.env.npm_package_name || '',
    meta: [
       charset: 'utf-8' ,
       name: 'viewport', content: 'width=device-width, initial-scale=1' ,
       hid: 'description', name: 'description', content: process.env.npm_package_description || '' 
    ],
    link: [
      //All adminLTE css from node_modules/admin-lte/

       rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' ,
       rel: 'stylesheet', href: '/plugins/fontawesome-free/css/all.min.css' ,
       rel: 'stylesheet', href: 'https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css' ,
       rel: 'stylesheet', href: '/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css' ,
       rel: 'stylesheet', href: '/plugins/icheck-bootstrap/icheck-bootstrap.min.css' ,
       rel: 'stylesheet', href: '/plugins/jqvmap/jqvmap.min.css' ,
       rel: 'stylesheet', href: '/dist/css/adminlte.min.css' ,
       rel: 'stylesheet', href: '/plugins/overlayScrollbars/css/OverlayScrollbars.min.css' ,
       rel: 'stylesheet', href: '/plugins/daterangepicker/daterangepicker.css' ,
       rel: 'stylesheet', href: '/plugins/summernote/summernote-bs4.css' ,
       rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700' 
    ],
    script: [
      //All adminLTE js
       src: '/plugins/jquery/jquery.min.js', body: true ,
       src: '/plugins/jquery-ui/jquery-ui.min.js', body: true ,
       src: '/plugins/bootstrap/js/bootstrap.bundle.min.js', body: true ,
       src: '/plugins/chart.js/Chart.min.js', body: true ,
       src: '/plugins/sparklines/sparkline.js', body: true ,
       src: '/plugins/jqvmap/jquery.vmap.min.js', body: true ,
       src: '/plugins/jqvmap/maps/jquery.vmap.usa.js', body: true ,
       src: '/plugins/jquery-knob/jquery.knob.min.js', body: true ,
       src: '/plugins/moment/moment.min.js', body: true ,
       src: '/plugins/daterangepicker/daterangepicker.js', body: true ,
       src: '/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js', body: true ,
       src: '/plugins/summernote/summernote-bs4.min.js', body: true ,
       src: '/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js', body: true ,
       src: '/dist/js/adminlte.js', body: true ,
      //AdminLte toastr and datatable here
       src: '/plugins/toastr/toastr.min.js', body: true ,
       src: '/plugins/jquery/jquery.min.js', body: true ,
       src: '/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js', body: true 
    ],

我的组件

//using toastr
import Vue from 'vue'
import toastr from 'admin-lte/plugins/toastr/toastr.min.js'
Vue.use(toastr)
window.toastr = require('toastr')

methods:
   addDoctor()
            console.log('hello doc')
            firebase.database().ref('doctors').push(
                name: this.name,
                address: this.address
            ).then((res)=>
                $('#exampleModal').modal('hide')
                toastr.success('Added!')
            ).catch((err)=>
                console.log(err)
            )
        

表格类

 <table id="myTable" class="table table-bordered table-responsive">

toastr 没有错误，但是当我在 network->js 中搜索时。我找到了toastr.min.js，但状态码是304。此外，我在控制台中收到有关数据表的错误。这是错误

Uncaught TypeError: $(...).DataTable is not a function
    at htmlDocument.eval (doctors.vue?78e7:120)
    at e (jquery.min.js:2)
    at t (jquery.min.js:2)

and

Uncaught TypeError: Cannot read property 'defaults' of undefined
    at dataTables.bootstrap4.min.js:5
    at dataTables.bootstrap4.min.js:5
    at dataTables.bootstrap4.min.js:5

我做错了什么？有人可以帮我解决这个问题吗？谢谢

编辑：toastr 的部分修复。没有导入 css

 rel: 'stylesheet', href: '/plugins/toastr/toastr.min.css', body: true ,

这就是烤面包机不显示的原因。 Toastr 问题现已解决。只剩下数据表问题了

【参考方案1】：

您只需要手动添加jquery和数据表样式即可使用数据表类和函数。

在脚本数组中

   src: '/plugins/jquery/jquery.min.js', body: true ,
   src: '/plugins/datatables/jquery.dataTables.min.js', body: true ,
   src: '/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js', body: true ,

在css中

 rel: 'stylesheet', href: '/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css'