![](/img/trans.png)
[英][Vue warn]: Error in nextTick: “TypeError: this.method is not a function” - Error shows only on my console but working as expected on browser
[英][Vue warn]: Error in mounted hook: “TypeError: element.circleProgress is not a function”
我遇到了这个问题:
[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 时它告诉我它不是 function。 我不知道我是否必须将它直接导入到组件中。
错误 'element.circleProgress is not a function' 表示 jquery 插件 circleProgress 目前不可用。
这可能是由于您在一个页面上多次加载 jquery 造成的。 查看您的代码,我知道您正在加载 jquery 2 次:第一次来自 code.jquery.Z4D236D9A2D102C5FE6AD1C50DA4BEC/jsjquery.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 插件不可用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.