时间戳

首页 > 解决方案 > 在 Vue 组件中导入和使用外部 Typescript 模块

javascript - 在 Vue 组件中导入和使用外部 Typescript 模块

问题描述

我对 Vue 很陌生，正在尝试在我的 Vue 组件中使用外部 Typescript 模块来渲染吉他指板（https://github.com/omnibrain/svguitar）。理想情况下，我希望能够在我的应用程序的不同位置呈现这些。我已按照中的步骤进行操作，ReadMe.md但无法正常工作。这是我的组件的样子：

<template>
  <div class="home">
    <div class="chart" />
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import { SVGuitarChord } from "svguitar";

const chart = new SVGuitarChord("#chart");

export default Vue.extend({
  mounted() {
    console.log("I'm mounted");
    chart
      .configure({
        strings: 6,
        frets: 5
      })
      .chord({
        fingers: [],
        barres: []
      })
      .draw();
  }
});
</script>

这样做，我在控制台中收到以下错误：

TypeError: Cannot read property 'put' of null
    at Svg.addTo (svguitar.es5.js?98dc:2746)
    at new SvgJsRenderer (svguitar.es5.js?98dc:7478)
    at SVGuitarChord.get (svguitar.es5.js?98dc:7654)
    at SVGuitarChord.clear (svguitar.es5.js?98dc:8021)
    at SVGuitarChord.draw (svguitar.es5.js?98dc:7685)
    at VueComponent.mounted (Home.vue?42b8:20)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4219)
    at Object.insert (vue.runtime.esm.js?2b0e:3139)
    at invokeInsertHook (vue.runtime.esm.js?2b0e:6346)

如果有人能帮我解决这个问题，那就太好了！如果需要任何其他信息，请告诉我。

标签： javascripttypescriptvue.jsnode-modules

解决方案

发生这种情况是因为您指定#chart为容器，SVGuitarChord但您编写<div class="chart" />. 它应该是<div id="chart" />

推荐阅读