Tips for fixing the "Uncaught TypeError: Cannot access property 'get' of undefined" error in Vue.JS 2

Here is my component:

methods: {
    reloadMessage() {
        setTimeout(function () {
            this.$http.get(window.BaseUrl + '/message/inbox');
        }, 1500);
    }
}

And here are my routes:

Route::group(['prefix' => 'message','as'=>'messeage.'],function(){
    Route::get('inbox', ['as'=>'inbox','uses'=>'MessageController@index']);
});

However, when the code is executed, I encounter an error:

Uncaught TypeError: Cannot read property 'get' of undefined

Any suggestions on how to solve this issue?

javascriptvue.jslaravel-5.3vuejs2vue-component

Answer №1

Don't lose track of context, Utilize bind:

methods: {
    updateData() {
        setTimeout(function () {
            this.$http.get(window.BaseUrl + '/data/info');
        }.bind(this), 2000);
    }
}

Alternatively, use an arrow function:

methods: {
    updateData() {
        setTimeout(() => this.$http.get(window.BaseUrl + '/data/info'), 2000);
    }
}

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

Is it possible to incorporate two ng-repeat directives within a single td element in a table?

The results so far Expected outcome Please advise me on how to incorporate two ng-repeats within one td. When I use a span tag afterwards, the expected result is not achieved. I have used one ng-repeat in the td and the other in a span tag, which is why t ...

javascriptjqueryhtmlangularjs

how to load CSS and JS files on certain views in Laravel 5.2

Currently, I am facing a situation where I need to ensure that the CSS and JS files are loaded only on specific views in Laravel 5.2. Due to my boss's decision to eliminate RequireJS for loading JS files on our blade templates, we are now exploring a ...

javascriptphpcsslaravel-5

The Highcharts plugin is currently not able to render the data

I have been extracting data from the mtgox api and after analyzing my console, I can confirm that all the data is being properly delivered to my chart. Nevertheless, I am facing difficulties in getting the data to actually display on my chart. Any assist ...

javascriptajaxapihighchartsmtgox

Update a specific row in a table by displaying a form modal using Vue.js

I am currently working on a table that includes an edit button along with an edit form dialog: <v-data-table v-bind:headers="headers" v-bind:items="packets" v-bind:search="search" > <template slot="items" scope="props"> < ...

vue.js

Errors and disruptions caused by SmoothScroll, ScrollMagic, and GSAP triggering glitches, jumps, and crashes

Connecting ScrollMagic with GSAP is not an issue - it works seamlessly. However, I encountered a problem when trying to implement smooth scrolling for my mouse. I added a smooth scrolling plugin to my project from this link: http://www.jqueryscript.net/ani ...

javascriptjquerysmooth-scrollinggsapscrollmagic

Transform PHP array into a JavaScript array

Currently, I am using Laravel and retrieving a list of values from a database with the following code: $idordenes = DB::table('ordenes')->select('id')->get(); Upon echoing the idordenes variable, the output is as follows: [{"fa ...

javascriptphparrayshtmlweb

Avoid re-rendering the template in Vue 3 with pinia when changing state values

I am utilizing Vue3 and Pinia for state management. Here is an excerpt from my Pinia file: export const useCounterStore = defineStore ({ id: 'statusData', state: () => ({ test1: 25, test2: 75 }) }) As for the template I am us ...

javascriptvue.jspinia

Is it possible to compile a .ts file at the root level without following the tsconfig.json configurations?

After dealing with the challenge of having both .ts and .js files coexisting in each folder for months, I have finally managed to get the app to compile correctly. The transition from JS to TS brought about this inconvenience, but the overall benefits make ...

javascriptnode.jstypescriptexpresscompilation

The function initFoodModel is missing and causing issues as it tries to read properties of undefined, specifically attempting to read 'findAll'

myWishlist.js const { setupFoodModel } = require("../../model/FoodModel"); const { setupWishlistModel } = require("../../model/myWishlistModel"); const setupMyWishlistModel = async () =\> { try { const sequelizeConnection = awai ...

javascriptnode.jsexpress

Adding an event listener dynamically in NativeScript-Vue programmatically

For my debut app project with NativeScript Vue, I'm encountering a hurdle. How can I programmatically set an event listener to a component? In a typical Vue application, you would utilize the syntax: component.$on('eventName', eventHandler), ...

vue.jsnativescriptnativescript-vue

When implementing helmetJS into my project, I noticed that Font Awesome was displaying white squares

Initially, I created an application that utilized this code in the HTML and incorporated classes with Font Awesome icons, which functioned effectively. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css&q ...

javascriptnode.jshelmet.js

Is it possible to create a button function in HTML that can alter the CSS image tag?

Is there a way I could create a function that can retrieve a value, update an image source, and then incrementally select another value? It would be incredibly helpful if you could provide a reference where I could learn how to do this or explain it in det ...

javascriptjqueryhtmlcss

Add JSON data to a table using jQuery and AJAX

When I make an AJAX call to retrieve data, the success part of the code looks like this: $("table.table").append("<tr><td>ID: " + item.ID + "</td><td>Name: " + item.name +" Url:</td><td><a href='https://.......s ...

javascriptjqueryjsonajax

Seems like ngAfterViewInit isn't functioning properly, could it be an error on my end

After implementing my ngAfterViewInit function, I noticed that it is not behaving as expected. I have a hunch that something important may be missing in my code. ngOnInit() { this.dataService.getUsers().subscribe((users) => {this.users = users) ; ...

javascriptangulartypescript

Storing data from a form by utilizing AJAX with PHP

Is there a way to save the form data either in a file or a local database using AJAX, while still sending the data through the form action to an external database? If you want to view the source code for my form, you can find it here: http://jsbin.com/ojU ...

javascriptphpjqueryajaxforms

Checking to see if all the users mentioned in the message have been assigned a role

Hello everyone, I'm new to asking questions here so please bear with me. I am trying to retrieve all the users mentioned in a message and check if any of them have a specific role, such as the staff role. Thank you for your help! Edit: Here is the ...

javascriptdiscord.js

Organizing a Vue.js SPA project: Implementing Vuex store and API calls efficiently

Here is how I have organized the structure of my Vue app: components/ article/ AppList.vue common/ AppObserver.vue NoSSR.vue layout/ AppFooter.vue AppHeader.vue ui/ AppButton. ...

javascriptvue.jsvuejs2vuex

Using Firebase to interact with data: $add(), .push(), and .set()

Utilizing Firebase and AngularFire has opened up many different approaches for CRUD operations with the Firebase API. However, I am still uncertain about the specific differences between using: $add with $firebaseArray The .push() method The .set() metho ...

javascriptangularjsfirebaseangularfire

The main attribute in the NPM package.json is missing or has no appropriate entry

I'm really struggling to figure out the best approach for setting up my package.json file. I have a JavaScript module that contains multiple reusable JS files, let's call it Module1. In Module1's package.json, the name attribute is set to " ...

javascriptnpm

Ensuring that objects remain fixed in place regardless of window resizing is a common task in web development, often achieved through a

I've been attempting to create range sliders with boxes that display the slider's current value, but I'm having trouble getting them positioned correctly when the window size changes. Despite trying various solutions found online, I resorted ...

javascriptjqueryhtmlcssfixed