Error: The $http variable in Vue Resource is not defined

I encountered an issue with the following code snippet inside my ready method:


this.$http.get('url',{},{
      headers: {
            "X-App-Token": "token"
         }
      }).then(  (data) => this.$set('cdata',data.data))
        .catch( (error) => console.log('Got a problem'+error));

While this code works fine in the ready method, when I attempt to move it to another function within the methods object, it fails to work.

ready(){
this.getJsonData();
},

methods: {
getJsonData: () => {
this.$http.get('url',{},{
  headers: {
        "X-App-Token": "token"
     }
  }).then(  (data) => this.$set('cdata',data.data))
    .catch( (error) => console.log('Got a problem'+error));
},
},

The error message reads:

src\src\App.vue:23 Uncaught TypeError: Cannot read property '$http' of undefined

//this becomes undefined.

Answer №1

If you're struggling to find a solution, make sure not to forget about the importance of using vue.use()

To overcome this issue, simply include the following code snippet:

import VueResource from 'vue-resource';
Vue.use(VueResource);

Add this to your main.ts file and your problem should be resolved

Answer №2

Perhaps the arrow used to create the function is causing it to be in an undefined scope? You could try this approach:

methods: {
  fetchData() {
    this.$http.get('url', {}, {
      //...

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

Querying MongoDB to locate an element within an array is a common task

I need help with writing a mongoose query to select a specific object from the "cartItems" array in my mongodb database and update its "qty" and "price" fields. Here is the data: { _id: new ObjectId("634a67e2953469f7249c9a7f"), user: new ObjectId("634 ...

Dynamically adjust row height in AG Grid within an Angular application based on the visibility of other columns

My current AG-Grid version is 21.2.1, and I am unable to upgrade it for certain reasons. I have successfully implemented wrapping cell content to ensure all content is visible. Additionally, I have buttons in my application to toggle the visibility of col ...

"Utilizing Javascript to create a matrix from a pair of object arrays

Attempting to transform an infinite number of arrays of objects into a matrix. height: [1,3,4,5,6,7] weight: [23,30,40,50,90,100] to 1 23 1 30 1 40 1 50 ... 3 23 3 30 3 40 ... Essentially mapping out all possible combinations into a matrix I experime ...

The correlation between frames per second (FPS) and the milliseconds required to render a frame in the stats plugin is known as the frame

Recently, I've implemented the Stats.js plugin to keep track of my three.js performance. Something seems off with the FPS (frames rendered per second) and MS (milliseconds needed to render a frame) information: According to my calculations, if it ta ...

Encountering an issue with a MEAN application using Angular 2: The error message states "Cannot read property

As a first-time application developer, I am working on creating a system to manage Client profiles. Utilizing the Angular tour of heroes for the basic structure, I integrated mongodb and express components sourced from various online platforms. However, I ...

Leveraging SASS with Vuetify styles

I am trying to incorporate some Vuetify classes into my own custom sass file, but I am encountering difficulties in doing so. I am working on a Vue-CLI3 project with the latest versions of Vue/Vuetify and have the following code snippet: main.sass @import ...

Having trouble with JavaScript function returning false?

I am trying to call a JavaScript function on an ASP.NET button client click event and want to prevent postback. The function is working, but it is not preventing the page from posting back. Here is my JavaScript code: function User2Check() { v ...

Unable to generate a JSON string from the JavaScript object

I need help converting the object I receive from the server into a JSON file for use in a d3.js chart: data = { "dog ":"5", "cat ":"4", "fish ":"12", } The desired output is: { "name" : "animal", "children" : [ {"name":"dog" ...

Ensure the browser stays anchored at the bottom of the page while employing jQuery to reveal a div

This piece of code allows me to toggle the visibility of a div: <a href="#" class="show_hide">Show/hide</a> <div class="slidingDiv"> My content...... <a href="#" class="show_hide">hide</a></div> <script src="http:// ...

Converting a string to regular text in JavaScript (specifically in ReactJS)

When I fetch data from an API, sometimes there are special characters involved. For example, the object returned may look like this: { question : "In which year did the British television series &quot;The Bill&quot; end?" } If I save t ...

Trouble with hide/show loop in setTimeout function

I have a special animation with 3 text items that are initially invisible. The goal is to make these items appear one by one with a delay of 2 seconds after clicking a button. Each item should be visible for 1 second before fading out and making way for th ...

What is the purpose of defining the initialState in Redux?

As per the Redux documentation, it is considered a best practice to establish an initialState for your reducer. However, maintaining this initialState can become challenging when the state relies on data from an API response, leading to discrepancies betwe ...

What method can I use in pure Javascript to identify which day the week begins on, either Monday or Sunday, based on the

Can someone help me determine the start day of the week in local time using only Javascript? The start day could be Monday, Sunday, Saturday, or Friday. I came across this helpful resource on Stack Overflow: <firstDay day="mon" territories="001 AD AI ...

Adjust the tally of search results and modify the selection depending on the frequency of the user's searches within an array of objects

Seeking assistance with adding a new function that allows users to navigate to the next searched result. Big thanks to @ggorlen for aiding in the recursive search. https://i.stack.imgur.com/OsZOh.png I have a recursive search method that marks the first ...

Prevent the PHP code from running once the Vue form has been executed

Here is my Vue form that I need help with: <FlashMessage message="Message sent!" :show="showMsg" /> <form @submit.prevent.stop="onSubmit" ref="ticketForm"> <div class="mb-4"> <label class="block" for="name"> <span c ...

Can dynamic loading JavaScript be debugged using a debugger such as WebKit, FireBug, or the Developer Tool in IE8?

After asking a question on Stack Overflow, I have successfully written JavaScript functions for loading partial views dynamically. However, debugging this dynamic loading script has been a challenge for me due to all loaded JavaScript being evaluated by th ...

Adjust the location of the slider scrollbar in jQuery UI

Currently, I am implementing jQuery UI's slider scrollbar and my goal is to set its position upon page load. Although I have referred to the sample code provided, my experience with jQuery UI is limited, so I am unsure about the necessary modification ...

Please provide values in the input box, with each value separated by

I attempted the following code: success: function (result) { for (var i = 0; i < result.d.length; i++) { var emails = new Array(); emails = result.d[i].Emailid; alert(emails); $("#EmailCC").val(emails); ...

Exploring A-Frame VR: Understanding the Distinction between Cursor and Raycaster

I'm in the process of developing a WebVR project that allows users to interact with the environment by 'clicking' on entities. Can you explain the distinction between using the cursor fuse attribute and the raycaster for interaction? ...

Determine using Lodash whether there is an object in an array that matches the ID from a separate array

There is a user array defined as follows: var users = [{ id: 1, name: 'ABC', isDisplay: true }, { id: 2, name: 'XYZ', isDisplay: true }, { id: 3, name: 'JKL', isDisplay: true }]; Additionally, there is another arra ...