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

Question

I'm pretty new to Vue and am trying to use an external Typescript module in my Vue Component to render a guitar fretboard ( https://github.com/omnibrain/svguitar ). Ideally I would like to be able to render these in different locations of my application. I've followed the steps in the ReadMe.md but can't get it to work. This is what my component looks like:

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

Doing this, I receive the following error in my console:

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)

Would be great if somebody could heb me out to get this to work! If any additional information is needed, please let me know.

Answer 1

This happen because you specify #chart as container to SVGuitarChord but you write <div class="chart" /> . It should be <div id="chart" />