Exploring a previously created Vue mini project that is experiencing technical issues

Hello everyone! I am revisiting a project that I haven't worked on in a while.

I tried using Vue.js for the first time to create an archery calculator for kinetic energy, velocity, and more. Instead of setting up a full Vue app, I simply used a CDN link. Initially, everything was working perfectly fine. However, upon checking it again, I noticed that the results are no longer updating when numbers are inputted. You can view the 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 encountered the error message "Vue is not a constructor". There's most likely a simple issue causing this problem, but I'm running short on time and thought I'd ask for help here since this calculator is live on a website.

Any assistance would be greatly appreciated!

Answer №1

If you are currently working with Vue 3, it's important to note that the codepen configuration requires Vue version 2:

https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.8/vue.min.js
.

The setup process for an app in Vue 3 differs from Vue 2, which is why you may encounter the error message Vue is not a constructor.

Answer №2

The project is built with Vue2 but someone attempted to load Vue3. Simply switch back to Vue2 or refactor the code for Vue3 compatibility.

Check it out here, please.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Open the navigation menu by clicking on either the navigation links or anywhere outside of it

Seeking a solution for my mobile navigation menu that closes when clicking outside the links or on one of them, without using jQuery. How can I achieve this with JavaScript ES6? Current code snippet: const navSlide = () => { const burger = docum ...

In Angular 2+, what is the comparable counterpart to Vue's Vuex?

I have experience with Vue's Vuex, but I am currently working on an Angular application. I would like to implement a similar principle where all components are managed from one central location (like a store in Vue). Is there an alternative to Vuex in ...

Is it a common issue that sound.stop() doesn't seem to function properly, while sound.play() operates successfully within Howler

I am having trouble utilizing Howler.js in Reactjs with typescript. While I can successfully play the sound, pausing or stopping it seems to be an issue. Below is the code snippet: This component takes all the audio details as props. I used console.log() ...

The Angular 8 click event operates like a JavaScript onload function

I have integrated my angular application into an iframe portlet. On the parent JSP page, there is a form with an invisible submit button. Clicking this button opens a popup window from an external application. I am attempting to trigger the click event o ...

Error message: It seems the spatial reference for this ESRI object is missing

Currently, I am utilizing Esri GIS to load the center location from an address. However, I am encountering an issue as I am using a geocoder from Google to obtain longitude and latitude, which is resulting in the following error message: TypeError: this.s ...

Title of a design pattern: Transferring information between programming languages

I am trying to determine the name of this pattern, if it exists. It involves taking data from one programming language and using it in another. For example, PHP to Javascript. Initially, I thought it could be delegation, but I have seen this process done b ...

Retrieve() displays solely the initial array within an object

I am facing an issue with my Redux/React project where I am calling an API to search for a specific ID based on the useParams value. I suspect the problem lies in my return statement return data.hero.find(hero => <Hero key={hero.id} hero={hero} /> ...

Which JavaScript objects contain the addEventListener method within their prototype?

I am aware of the following: Element.prototype.addEventListener Window.prototype.addEventListener Document.prototype.addEventListener Are there any more? ...

Implement dynamic routes within your Nuxt single page application once it has been generated

I'm currently exploring the possibility of implementing dynamic routes in a Nuxt SPA. While I am familiar with using dynamic routes in Universal Mode and generating them during build time through functions, I am searching for a solution that does not ...

Obtain the content enclosed within parentheses using JavaScript

const str = "(c) (d)"; I need to separate the given string into an array The result should be [0] => 'c' [1] => 'd' ...

Accessing JS code from HTML is not possible in React

Attempting to create a list using React, I have utilized the module found here: https://github.com/pqx/react-ui-tree I am currently testing out the sample application provided in this link: https://github.com/pqx/react-ui-tree/blob/gh-pages/example/app.js ...

What is the best way to display unique data each time a user clicks on an item in a list generated by the .map function

Trying to figure out the best way to handle displaying information for three different restaurants in a database. Currently using the .map method to display their names on cards, but now wanting to create a functionality where clicking on a card will tak ...

What steps can be taken to resolve the deprecated error for isVueInstance in vue.js2?

Utilizing vue-jest for test cases in vue.js2 involves working with a component named Register.vue. The test cases are written in Register.spec.js, and when running npm t, everything is functioning correctly. However, there are some errors being encountered ...

Using Material UI Typography and Media Queries for Responsive Design

Is there a way to make the variant prop in the typography component dynamic based on different screen widths? Any suggestions or feedback would be greatly appreciated. import { useTheme, useMediaQuery } from "@material-ui/core"; const Home = () => { ...

A guide on importing images into a CSS file with Reactjs

Currently, I am utilizing Reactjs (Nextjs) and have placed my images folder within the "public" directory. In my "style.css" file, I adjusted the path for the image, but unfortunately it is not displaying. Can you please help me identify where I may have ...

Tips for transforming C#.NET code into JavaScript code

A few years back (around 3 or 4 years ago), I recall hearing about a fascinating concept that involved generating client-side JavaScript code from C#.NET source code. It may have been related to validation tasks specifically... Does anyone have more inform ...

Choose an element at random

I am trying to figure out how to select all div elements with the same class of "dot" under a parent div in JavaScript. Here is an example structure: <div id="dots"> <div class="dot"> . </div> <div class="dot"> . </div> ...

How can I extract a substring from a URL and then save it to the clipboard?

Hi there! I'm working on a project for my school and could really use your expertise. I need help extracting a substring from a URL, like this one: URL = https://www.example.com/blah/blah&code=12432 The substring is: 12432 I also want to display ...

How to utilize AngularJS to submit a Symfony2 form

I'm currently working on developing an application with Symfony2 for the backend and considering using AngularJS for the frontend. My plan is to integrate Symfony forms into the project as well. I have successfully set up the form with all the necessa ...

A new WordPress plugin that includes a custom designed stylesheet featuring a hidden display property within a specific

After reloading the page, my plugin displays a constructed stylesheet. However, when I access it for the first time or reload with ctrl + f5, the constructed stylesheet does not appear. I have meticulously searched through all of the plugin code looking f ...