$(…)datatable不是vue3应用程序中的函数

zfycwa2u 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(444)

我想用vue3应用程序实现datatables。但在正确导入方面存在问题。
根据文档导入不起作用。

var $  = require( 'jquery' );
var dt = require( 'datatables.net' )();

抛出：无法设置未定义的属性“$”
所以我尝试了我发现的一切，但没有成功。我有一个带有示例分支数据表的github项目。带有导入的代码位于main.js文件中。
现在我有了这个进口

import jQuery from 'jquery/src/jquery.js'
window.$ = window.jQuery = jQuery;
import dataTables from 'datatables.net';
window.dt = dataTables;

抛出：$（…）。datatable不是函数。
我迷路了。datatables引擎盖下发生了什么？为什么不能用jquery连接它？
谢谢你的帮助。

vue.js jquery Import datatables

来源：https://stackoverflow.com/questions/68480760/datatable-is-not-a-function-in-vue3-application

1条答案

按热度按时间

7qhs6swi1#

第一步，通过npm jquery和datatables安装：
npm安装jquery
npm安装datatables.net
然后在组件或视图中的脚本标记中导入：

import $ from "jquery";
import DataTable from "datatables.net";

但如果需要全局导入jquery和datatable，可以在main.js中导入它（如您所写）：

window.$ = window.jQuery = require('jquery');
import {DataTable} from "datatables.net";

然后将表（此处表的名称为“testtable”）传递给datatable函数：

export default {
  data() {
    return {
      testTable: [
        [
          "Tiger Nixon",
          "System Architect",
          "Edinburgh",
          "5421",
          "2011/04/25",
          "$3,120"
        ],
        [
          "Tiger Nixon",
          "System Architect",
          "Edinburgh",
          "5421",
          "2011/04/25",
          "$3,120"
        ]
      ]
    };
  },
  mounted() {
    $("#example").DataTable({
      data: this.testTable
    });
  }

并按表标签在模板中输出：

<table id="example">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Extn.</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
</table>

我希望我能帮忙。

赞(0）回复(0）举报 2021-09-13

我来回答

$(…)datatable不是vue3应用程序中的函数

1条答案

相关问题

热门标签

最新问答