Question

我对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)

如果有人可以请我帮忙使其工作，那就太好了！如果需要任何其他信息，请告诉我。

Answer 1

之所以发生这种情况，是因为您将#chart指定为SVGuitarChord的容器，但是您写了<div class="chart" />。应该是<div id="chart" />

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

1 个答案: