vue-js-toggle-buttonを使用してコンポーネントをマウントできません

Question

Vue 2のプロジェクトにpluginを使用しようとしましたが、以下のようにVue警告が表示されました。

[ヴューが警告]：テンプレートまたはVUEのコンポーネント内

を定義し 機能しませレンダリング：コンポーネントのマウントに失敗しました

import ToggleButton from 'vue-js-toggle-button' 
export default { 
    components: { ToggleButton } 
} 

その後、

<toggle-button :value="true" :labels="{checked: 'Foo', unchecked: 'Bar'}"/> 

プラグインはそれほど普及しておらず、どんな助けでも大歓迎です。

Answer 1

トグルボタンを別のコンポーネントにエクスポートしないでください。それを使用するコンポーネントにインポートして、Vue.use(ToggleButton)で使用するようVueに指示します。その後、コンポーネントのテンプレートの中でそれを使用し、後でそのコンポーネント全体をエクスポートすることができます！

例は次のようになります。

<template> 
    <toggle-button #someOfYourValues#></toggle-button> 
</template> 

ここでは、トグルボタンの何かをインポートしないでください！コンポーネント内のタグとして使用するだけです！

すべてのVueインスタンスの作成が行われるメインjsファイルに進みましょう。通常、これは次のようになります。

<script> 
    import Vue from 'vue' 
    import ToggleButton from 'vue-js-toggle-button' 
    Vue.use(ToggleButton) 

    new Vue({ 
    el: #yourDivInTheBaseHTMLFile 
    # some other stuff for your vue instance 
    }) 
</script> 

多くのコンポーネントを持つToDoリストである自分の現在のVueプロジェクトでテストしました。それはあなたがVue.use()をするときに文字通りそれらのすべての一つの中で働きます。 必要に応じて、私はプロジェクトにリンクすることができますので、一見することができますが、この簡単な説明が必要です;）