Question

我在使用typesize-app使用materialize-css时遇到问题：

import { Dropdown } from "materialize-css";

document.addEventListener('DOMContentLoaded', function () {

var elems = document.querySelectorAll('.dropdown-trigger');
var instances = Dropdown.init(elems, {});

导致＆＃39;未捕获的TypeError：无法读取属性＆＃39; init＆＃39;未定义的在HTMLDocument。（site.ts：15）＆＃39;加载应用时。

任何人都可以解释出现了什么问题吗？

其他信息：

的package.json：

{
   "version": "1.0.0",
   "name": "asp.net",
   "private": true,
   "dependencies": {
      "ts-loader": "^4.4.1",
      "vue": "^2.5.16",
      "vue-class-component": "^6.2.0",
      "vue-property-decorator": "^6.1.0",
      "materialize-css": "^0.100.2",
      "@aspnet/signalr": "^1.0.0",
      "webpack": "^4.12.0",
      "webpack-cli": "^3.0.8"
   },
   "devDependencies": {
      "@types/vue": "^2.0.0",
      "@types/materialize-css": "^1.0.3",
      "aspnet-webpack": "^2.0.3",
      "typescript": "^2.9.2",
      "file-loader": "^1.1.11",
      "vue-cli": "^2.9.6",
      "vue-loader": "^15.2.4",
      "vue-template-compiler": "^2.5.16",
      "webpack-hot-middleware": "^2.22.2"
   },
   "scripts": {
      "build": "webpack"
   },
   "-vs-binding": {
       "BeforeBuild": ["build"]
   }

}

tsconfig.json：

{
  "compilerOptions": {
     "sourceMap": true,
     "noImplicitReturns": true,
     "noImplicitAny": true,
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
     "target": "es6",
     "strict": true,
     "module": "es2015",
     "moduleResolution": "node",
     "lib": [
        "es2016",
        "dom"
      ]
   },
   "typeAcquisition": { "enable": true },
   "include": [
   "app/scripts/**/*"
   ],
   "exclude": [
      "node_modules",
      "wwwroot"
   ],
   "compileOnSave": true
}

和webpack.config.js：

let webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
let path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        site: './app/scripts/site.ts',
        traject: './app/scripts/traject.ts'
    },
    devtool: 'inline-source-map',
    output: {
        path: path.resolve(__dirname, 'wwwroot', 'js'),
        filename: '[name].js',
        publicPath: '/js/'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
                options: { appendTsSuffixTo: [/\.vue$/] }
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },        
    plugins: [
        new VueLoaderPlugin()
    ]
};

Answer 1

好的，我只浏览了materialize-css的JS代码并阅读了在线教程。因为看起来你只是错过M.前面的Dropdown来正确实例化它。

以这种方式尝试：

var instances = M.Dropdown.init(elems, {});

从＆＃34; materialize-css＆＃34;中导入{下拉}解析为＆＃39; undefined＆＃39;

1 个答案: