时间戳

首页 > 解决方案 > Nuxtjs toastr 和数据表插件在 adminLTE - 3 模板中不起作用

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

问题描述

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

我的 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

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

编辑：烤面包机的部分修复。未导入 css

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

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

标签： javascriptjqueryvue.jsdatatablesnuxt.js

解决方案

您只需要手动添加 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'}

推荐阅读