无法从 vue 模板中找到颜色选择器功能

Question

我正在尝试将引导颜色选择器插件与 vue2 一起使用。我阅读了以下教程，该教程展示了如何执行 that 之类的操作。

这是我的组件代码：

<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/ 颜色选择器工作正常如果我像这样直接从 javascript 调用它：

$('#sidebar_font_color').colorpicker()

但是当我这样做时

<color-picker></color-picker>

我在控制台中得到了这个：

[Vue 警告]：挂载钩子错误：“TypeError: $(...).colorpicker is 不是函数”

我不是在制作一个完整的 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>