从vue模板中找不到色选择器函数

Question

我试图使用引导颜色选择插件与vue2。我读了下面的教程，它展示了如何做像那这样的事情。

以下是我的组件代码：

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

如果我直接从javascript调用https://itsjavi.com/bootstrap-colorpicker/颜色选择器，它工作得很好，如下所示：

$('#sidebar_font_color').colorpicker()

但是当我这么做的时候

<color-picker></color-picker>

我在控制台上看到了这个：

Vue警告:挂载钩子中的错误："TypeError：$(.).colorpicker不是函数“

我不是做一个完整的SPA应用程序，只是使用一些vue2与我的应用程序在不同的点。你知道它为什么找不到那个功能吗？

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>

​