Question

我正在尝试使用vue2的bootstrap颜色选择器插件。我阅读了以下教程，该教程展示了如何处理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警告]：挂钩错误：＆＃34; TypeError：$（...）。colorpicker is 不是一个功能＆＃34;

我没有制作一个完整的SPA应用程序只是在我的应用程序的各个点使用一些vue2。知道为什么它找不到这个功能吗？

Answer 1

这是一个极小的工作示例。您的错误消息表明您在mounted运行时没有加载颜色选择器代码，或者可能在颜色选择器代码之前未加载jQuery。

＆＃13;

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

＆＃13;

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

＆＃13;

无法从vue模板中找到colorpicker函数

1 个答案: