Whoops! Unable to interpret properties from an undefined source while trying to retrieve 'get'

Every time I execute my program, I encounter the following error:

Cannot read properties of undefined (reading 'get')
TypeError: Cannot read properties of undefined (reading 'get')
    at Proxy.mounted (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/HdHistory.vue?vue&type=script&lang=js:563:29)
    at eval (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:2811:88)
    at callWithErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:296:18)
    at callWithAsyncErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:304:17)
    at hook.__weh.hook.__weh (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:2791:19)
    at flushPostFlushCbs (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:461:41)
    at flushJobs (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:499:5)

Here is the code snippet causing the issue :

 mounted() {
    Promise.all([
      this.$http.get('/api/v0/tickets/divisions')
        .then((response) => {
          this.customer.items = response.data;
        }),
      this.$http.get('/api/v0/hd/groups')
        .then((response) => {
          this.groups.items.push(...response.data);
          // by default select all
          if (this.groups.selected.length === 0) this.groups.selected = this.groups.items
        }),
    ])
      .then(() => {
        this.timeScaleSelected();
      })
      .catch((e) => {
        console.error(e);
      });
  },

Can someone provide any insights or solutions?

I am currently in the process of migrating my program from Vue2 to Vue3.

javascriptvue.jsvuejs3vuetify.js

Answer №1

Make sure to review the global variable within your main.js file that you are attempting to utilize.

For Vue 2, the format is as follows:

Vue.prototype.$http = new HTTPService();

For Vue 3, you should follow this format:

const app = createApp(RootComponent)

app.config.globalProperties.$http = new HTTPService();

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

How to convert deeply nested object structures containing arrays in JavaScript

Despite the less-than-desirable name of this inquiry, the question is fairly straightforward. I have a particular object: let test = { date1: [ { time: 1, value: 5, }, { time: 2, value: 6, }, ], date2: [ { ...

javascriptarraysecmascript-6reduce

How can I prevent my Vue.js application from losing focus when navigating to different components?

I am encountering an issue with my Vue.js app where the focus is lost when changing routes. Initially, when the site loads, the first element of the header component is correctly in focus as desired. However, when navigating to a different link on the site ...

javascriptvue.jsvuejs2vue-componentvue-router

Is it possible to modify the appearance of the element that was just clicked on?

Hello everyone, I'm currently working on a form with different inputs, all with the same class: <input type="text" name="username" class="field" /> <input type="text" name="email" class="field" /> I'm trying to figure out how to ch ...

javascriptjqueryhtml

I am attempting to load the ajax content into separate divs simultaneously

When I attempt to load the ajax into two separate divs, I notice that despite calling for data to be placed in two different divs within the ajax code, it all ends up in one div. <script>$(document).ready(function(){ $.ajax({ url: "http: ...

javascriptjqueryhtmlajax

Tips for preventing the overwriting of a JSON object in a React application

I'm trying to compare two JSON objects and identify the differing values in the second JSON object based on a specific key. My goal is to store these mismatched values in a new JSON object. The current issue I'm facing is that when there are mult ...

javascriptreactjsjsontypescripttsx

Is there a way to align the Material UI mobile menu to the left edge of the screen?

Need help with this UI issue: Currently working on designing a mobile web app using React and Material UI. I'm struggling to get the sidebar menu to start from the left edge of the screen, as it seems to have an unwanted margin preventing it. Any sug ...

javascriptreactjsmaterial-ui

JS function to reverse a string

Not to worry, I've managed to figure out how to reverse a string (a one-word string at least). > function reverse(s){ > return s.split("").reverse().join(""); } Is there a way to reverse a string in this manner: "Dady come home" -> "yd ...

javascriptarraysstringreverse

What do you call a JavaScript function when it has a name

This code is confusing to me. It's not the usual JavaScript syntax for a function that I know of. Is this a specific function? Or perhaps it's a callback for when an update event occurs? Apologies for these beginner questions, as I am quite new t ...

javascriptfunctionsyntax

Managing Ajax error messages

$.getJSON("data.php", function(data) { ... this callback is for handling successful retrieval of data }); What is the best way to manage errors in relation to the ongoing $.getJSON request? ...

javascriptjqueryajaxjson

Steps to display a list of errors received from Express using Vue.js following a post request

My goal is to develop a simple register/sign up web application using Express, Vue.js, and MongoDB. I have implemented backend validation checks such as ensuring all fields are filled out and checking if the passwords match. Any errors encountered during ...

node.jsexpressvue.jsaxios

How big is the array size in the WebAudio API data?

Exploring the visualization of waveform and FFT generated by the audio stream from the microphone through the WebAudio API. Curiosity strikes - what is the size of each data array available at a given moment? Delving into the getByteTimeDomainData, it men ...

javascripthtmlaudioweb-audio-api

Tips for initiating a jQuery form submission

At this moment, the form is being submitted using the default URL. I would like it to utilize the form submit event in my JavaScript code so that it can pass the .ajaxSubmit() options. Below is the corresponding JavaScript code: $('#selectedFile&a ...

javascriptjqueryajax

What is the most effective method to include JSON data containing various IDs at the end within an $http.get() request in AngularJS?

I'm facing a challenge with displaying JSON items that have an array of different ids at the end of the URL (/api/messages/:messageId). For instance, accessing /api/messages/12345 would return {"subject":"subject12345","body":"body12345","id":"12345"} ...

javascriptangularjsjsonscope

prettyPhoto popup exceeds maximum width and height limitations

I am currently using the most up-to-date version from No Margin for Errors and I have set allow_resize to true. However, the size of the display is still too large. Is there a way to set a maximum width/height? I have already configured the viewport as fo ...

javascriptjqueryhtmlcssprettyphoto

Using a CSS gradient with a variable in React.js - A guide to implementation

Looking to incorporate the following CSS property into the Navlink component. In the CSS file, the property is usually written like this using gradient. .ele { background-image: linear-gradient(45deg, #808080 25%, transparent 25%), li ...

javascriptcssreactjsreact-hookscss-gradients

What's the most effective method for identifying a pattern within a string of text?

For the sake of honing my skills, I undertook a practice task to identify patterns of varying lengths within a specified string. How can this function be enhanced? What potential issues should I address in terms of optimization? function searchPattern(p ...

javascriptstringfunction

"Before the click even happens, the jquery click event is already

As I was developing a small todo app, I ran into an issue where the alert message seemed to pop up before the click event was triggered. It almost seems like the event is not registered properly. Can someone explain why this is happening? (function() { ...

javascriptjqueryangularjsnode.js

Mixing strings with missing slashes in links

console.log(mylink) When using the console to log mylink, the expected result is a normal link like http://example.com/something.jpg. I tried concatenating it as shown below: var html = '<div id="head" style="background:linear-gradient(rgba(0, 0 ...

javascriptjqueryhtml

Are the features of emulation mode in IE11 identical to implementing the meta EmulateIE7 tag?

When using the IE11 browser, I encountered an interesting message on the console: “HTML1122: Internet Explorer is running in Enterprise Mode emulating IE8.” Upon researching this error code on this link, I found out that it is a mode configured by IT ...

javascriptjqueryinternet-exploreremulation

What is the best way to incorporate spacing between rows in material UI and React?

How do I add spacing between each row in my table using MUI? I've tried using borderSpacing: '0px 10px!important' and borderCollapse: 'separate!important' but it's not working. Any suggestions on how to achieve this with MUI w ...

javascriptreactjshtml-tablematerial-ui