やりたいこと
https://material.io/develop/web/components/buttons/を参考にVue(Single File Components 使用)に実装しようとしています。
Test.vue
1<template> 2 <button class="mdc-button"> 3 Button 4 </button> 5</template> 6 7<script> 8 import {MDCRipple} from '@material/ripple' 9 const buttonRipple = new MDCRipple(document.querySelector('.mdc-button')) 10 console.log(buttonRipple) 11 12export default { 13 name: 'Test' 14 } 15</script> 16 17<style lang="scss" scoped> 18 @import "~@material/button/mdc-button"; 19 20 .foo-button { 21 @include mdc-button-ink-color(teal); 22 @include mdc-states(teal); 23 } 24</style>
ソースコード
https://github.com/fm311g/z4h8ckdg
クローン後、該当のリポジトリ内で以下の二つのコマンドを使うことで実行できます。
npm install
npm run dev
結果
画面には何も表示されず、DevToolsのConsoleに以下の文章が記述されていました。
DevTools
1Uncaught TypeError: Cannot read property 'addEventListener' of null 2 at Object.registerInteractionHandler (index.js?b9c4:74) 3 at ACTIVATION_EVENT_TYPES.forEach (foundation.js?712f:256) 4 at Array.forEach (<anonymous>) 5 at MDCRippleFoundation.registerRootHandlers_ (foundation.js?712f:255) 6 at MDCRippleFoundation.init (foundation.js?712f:207) 7 at new MDCComponent (component.js?5b09:55) 8 at new MDCRipple (index.js?b9c4:35) 9 at eval (Test.vue?7dd6:9) 10 at Object.<anonymous> (app.js:808) 11 at __webpack_require__ (app.js:679)
9行目が原因っぽいですが、それ以上のことはわかりません。
Test.vue:9
1const buttonRipple = new MDCRipple(document.querySelector('.mdc-button'))
教えて欲しいこと
Console のエラーを解決する方法