Hi everyone I am revisiting an older project that I haven't toyed with in quite some time.

I was trying out vue for the first time and attempted to create an calculator for archery (Kinetic energy/velocity/etc). Didnt want to do a full fledge vue app setup so i just used a cdn link. It was initially completely functional but now that i am checking it out again I see the results are no longer populating when numbers have been added. I have linked a codepen here -> https://codepen.io/gchis66/pen/ZERKBwd

new Vue({
     el: "#archery-calculator",
     data() {
      return {
         IBO:'',
         drawLength:'',
         drawWeight:'',
         arrowWeight:'',
         additionalWeight:'',
         arrowLength:'',
         distanceFromNock:''
      }
     },
     computed: {
         calcVelocity: function(e){
             
             let ibo = this.IBO;
             let dL = this.drawLength;
             let dW = this.drawWeight;
             let aW = this.arrowWeight;
             let adW = this.additionalWeight;
             let result = ibo   (dL - 30) * 10 - adW / 3   Math.min(0,-(aW - (5*dW))/ 3);
             let truncated = Math.round(result);
             if (truncated > 0){
                 return truncated;
             }else{
                 return 0;
             }
             
         },
         calcKineticEnergy: function(){
             let ibo = this.IBO;
             let dL = this.drawLength;
             let dW = this.drawWeight;
             let aW = this.arrowWeight;
             let adW = this.additionalWeight;
             let s = ibo   (dL - 30) * 10 - adW / 3   Math.min(0,-(aW - (5*dW))/ 3);
             let result = (aW*(s**2))/450800;
             let truncated = Math.round(result);
             return truncated;
 
         },
         calcMomentum: function(){
             let ibo = this.IBO;
             let dL = this.drawLength;
             let dW = this.drawWeight;
             let aW = this.arrowWeight;
             let adW = this.additionalWeight;
             let velocity = ibo   (dL - 30) * 10 - adW / 3   Math.min(0,-(aW - (5*dW))/ 3);
             let momentum = (aW * velocity)/225400;
             let truncated = momentum.toFixed(2);
             return truncated;
         },
         calcFoc: function(){
             let aL = this.arrowLength;
             let dN = this.distanceFromNock;
             let result = ((100 * (dN-(aL/2)))/aL);
             if (result > 0) {
                 return result.toFixed(1);
             }
             else{
                 return 0;
             }
         }
     }
 });

I am receiving the error "Vue is not a constructor". There's probably an obvious issue but I am short on time and decided to ask here since this calculator is live on a website.

Any help is greatly appreciated!

CodePudding user response：

You are using Vue 3. In codepen configuration please use Vue in version 2: https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.8/vue.min.js.

App setup in Vue 3 is different than in 2, so you have error Vue is not a constructor.

CodePudding user response：

This is Vue2 project and you are trying load vue3. Just switch to vue2 or rewrite it for vue3.

Look here pls