[Vue 警告]：挂载钩子出错：“TypeError：element.circleProgress 不是函数”

Question

我遇到了这个问题：

[Vue 警告]：挂载钩子错误：“TypeError: element.circleProgress 不是函数”

animateCircle(element, percents, oldPortion) {
                let portion = percents / 100; // convert from percents
                portion -= Math.min(portion * 0.02, 0.01); // prevent user from confusion by cursor

                element.circleProgress({
                    'value': portion,
                    'animationStartValue': oldPortion,
                });
                element.circleProgress();
            },
            initCircle() {
                const vm = this;
                const element = $(this.$refs.circleProgress);

                element.circleProgress({
                    animation: {
                        duration: 1100,
                        easing: 'circleProgressEasing',
                    },
                    size: 247,
                    thickness: 20,
                    startAngle: -Math.PI / 2,
                    emptyFill: 'rgba(0, 0, 0, 0)',
                    fill: {
                        image: 'img/upgrade/circle-progress.png',
                    },
                }).on('circle-animation-progress', function (event, progress, stepValue) {
                    if (vm.upgradeCircle.progressFn) {
                        vm.upgradeCircle.progressFn(event, progress, stepValue);
                    }
                }).on('circle-animation-end', function () {
                    vm.upgradeCircle.active = false;
                });

                this.upgradeCircle.element = element;
                this.upgradeCircle.canvas = $(element.circleProgress('widget'));
            }
        },

我不知道为什么它在我的 index.vue 我安装了 jquery ：

    <link href="https://unpkg.com/vue-multiselect@2.0.0-beta.14/dist/vue-multiselect.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/css/all.css">
            <link href="/css/wnoty.css" rel="stylesheet">
            <link rel="stylesheet" href="{{ asset('/css/app.css') }}?v={{time()}}">
    
    
        <link href="https://unpkg.com/vue-multiselect@2.0.0-beta.14/dist/vue-multiselect.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue-multiselect@2.0.0-beta.14"></script>
<script src="https://vuejs.org/js/vue.min.js"></script>
       <script src="/dash/js/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
    <script src="/js/wnoty.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>

var pluginName = 'roulette';
            $.fn[pluginName] = function (method, options) {
                return this.each(function () {
                    var self = $(this);
                    var roulette = self.data('plugin_' + pluginName);
                    if (roulette && roulette[method]) {
                        if (roulette[method]) {
                            roulette[method](options);
                        } else {
                            console && console.error('Method ' + method + ' does not exist on jQuery.roulette');}
                    } else {
                        roulette = new Roulette(method);
                        roulette.init(self, method);
                        $(this).data('plugin_' + pluginName, roulette);
                    }
                });
            }
        })(jQuery);

我不知道为什么它告诉我它不是一个函数 从索引调用 jquery。不知道要不要导入 直接进入组件。

Answer 1

错误'element.circleProgress is not a function'表示jquery插件circleProgress目前不可用。

这可能是由于您在页面上多次加载 jquery 造成的。查看您的代码，我知道您正在加载 jquery 2 次：第一次来自 code.jquery.com，第二次来自 /dash/js/jquery.min.js

<!-- load jquery for the first time: -->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

<!-- register plugin circle-progress -->
<script src="dist/circle-progress.js"></script>

<script src="https://unpkg.com/vue-multiselect@2.0.0-beta.14"></script>
<script src="https://vuejs.org/js/vue.min.js"></script>

<!-- Load jquery a second time? -->
<script src="/dash/js/jquery.min.js" type="text/javascript"></script>

如果是这种情况，您应该决定您需要哪个 jquery，并确保您只加载一次。第二次加载 jquery 时，所有以前注册的插件都会被清除/忘记，这可能会导致错误“element.circleProgress 不是函数”，这意味着 circleProgress 插件不可用。