外部のjavascriptをVueコンポーネントに挿入する方法

Question

カスタムJavaScript（スケッチャー）をVueコンポーネントに挿入しようとしていますが、これまでのところ運がありません。私はこのようなテンプレートに直接JavaScriptを挿入しようとすると：

<template> 
    <div id="sketcher"> 
     var sketcher = new ChemDoodle.SketcherCanvas('sketcher', 400, 300); 
    </div> 
</template> 

私はエラーを取得する：「テンプレートのみUIの状態をマッピングするための責任を負わなければならない、あなたのテンプレートで副作用を持つタグを置くようにしないでください。彼らはパースされないので、 別の.jsファイルにコンポーネントを作成し、それをVueコンポーネントにインポートします。

sketcher.js：

export default ({ 
    mounted(){  
    return new ChemDoodle.SketcherCanvas('sketcher', 400, 300) 
    } 
}) 

Home.vue

<template> 
    <div id="sketcher"> 
     <app-sketcher></app-sketcher> 
    </div> 
</template> 

<script> 
import sketcher from './sketcher';  
export default { 
    components: { 
    "app-sketcher": sketcher 
    } 
} 
</script> 

が、私はこのエラーを取得するには： "：テンプレートまたは定義されていない機能をレンダリングコンポーネントのマウントに失敗しました"。私はこれを修正する方法や、Vueコンポーネントにjavascriptを組み込む他のオプションを提案する方法に関する提案を高く評価します。

Answer 1

最初のエラーメッセージは自明です。<script>タグを単一ファイルのVueコンポーネントの<template>に配置することはできません。

2番目の例では、Home.vueファイルに登録するときにapp-sketcherコンポーネントのテンプレートを定義していません。 sketcher.jsファイルは、mountedフックの定義だけをエクスポートします。

---

あなたはSketcher.vueファイル作ることができます。

<template> 
    <div id="sketcher"></div> 
</template> 

<script> 
export default { 
    mounted() {  
    return new ChemDoodle.SketcherCanvas('sketcher', 400, 300) 
    } 
} 
</script> 

[インポートにそれを使用するので、のようなあなたのHome.vueファイルでそれを使用します。

<template> 
    <app-sketcher/> 
</template> 

<script> 
import AppSketcher from './Sketcher';  
export default { 
    components: { AppSketcher } 
} 
</script>