vueテンプレートからカラーピッカー機能を見つけることができません

Question

vue2でブートストラップカラーピッカープラグインを使用しようとしています。私はthatのようなものを行う方法を示す次のチュートリアルを読んでいます。ここで

は私のコンポーネントのコードです：私はこのようなJavaScriptから直接呼び出す場合

<template> 
    <div class="input-group colorpicker-component"> 
     <input type="text" value="#b8c7ce" class="form-control"/> 
     <span class="input-group-addon"><i></i></span> 
    </div> 
</template> 

<script> 
    export default { 
     mounted: function() { 
      $(this.$el).colorpicker() 
     }, 
    } 
</script> 

https://itsjavi.com/bootstrap-colorpicker/ カラーピッカーが正常に動作します：

$('#sidebar_font_color').colorpicker() 

しかし、私はこの

<color-picker></color-picker> 

を行うとき

コンソールでこれを取得します：

[Vue warn]: Error in mounted hook: "TypeError: $(...).colorpicker is not a function"

さまざまな点で私のアプリケーションでいくつかのvue2を使用している完全なSPAアプリケーションを作っているわけではありません。なぜその機能を見つけることができないのでしょうか？

Answer 1

ここには最小の実例があります。エラーメッセージは、mountedが実行されたときにロードされたカラーピッカーコードがないことを示します。または、カラーピッカーコードの前にjQueryがロードされていない可能性があります。

new Vue({ 
 
    el: '#app', 
 
    components: { 
 
    colorPicker: { 
 
     template: '#cp-template', 
 
     mounted() { 
 
     $(this.$el).colorpicker() 
 
     }, 
 
    } 
 
    } 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.1/css/bootstrap-colorpicker.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script> 
 
<div id="app"> 
 
    <color-picker></color-picker> 
 
</div> 
 

 
<template id="cp-template"> 
 
    <div class="input-group colorpicker-component"> 
 
     <input type="text" value="#b8c7ce" class="form-control"/> 
 
     <span class="input-group-addon"><i></i></span> 
 
    </div> 
 
</template>