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

Tips on transmitting form information from client-side JavaScript to server-side JavaScript with Node.js

Having created an HTML page with a form, my goal is to capture user input and store it in a JSON file. However, I've run into some confusion... In the process, I utilized the express module to set up a server. My mind is juggling concepts such as AJA ...

javascripthtmljsonnode.jsajax

Utilizing Vue JS to showcase a pop-up block when hovering over a specific image

There are four images displayed, and when you hover over each one, different content appears. For example, hovering over the first image reveals a green block, while hovering over the second image reveals a blue block. However, the current logic in place i ...

javascriptvue.jsoptimizationvuejs2

When executing npm run server, an error is generated saying: "sh: 1: vue-cli-service: not

I encountered an issue while setting up an existing vue project and received the following error message: admin@kali:/media/veracrypt1/themeforest-LSerfC0M-skote-vuejs-admin-dashboard-template/Admin$ npm run serve > <a href="/cdn-cgi/l/email-protec ...

vue.jsnpm

Is there a way to remove the initial word from a sentence?

Tue 26-Jul-2011 Looking to remove the initial word "Mon" using javascript with jQuery. Any suggestions on accomplishing this task? ...

javascriptjquery

Leveraging the power of Angular to send the contents of a div via email

I have a div element with a specific class name and I am currently exploring ways to extract the rendered components of that div as text in order to include it in the body of an email. I have tried various methods such as using classes and ng-model, but so ...

javascripthtmlangularjsemail

Instructions for incorporating an if-else statement in a script

-I want to implement the following logic: if(!editMode) display the create page, else show the update page because I am using the same form for both create and edit operations by combining them. -I am currently following an online tutorial but it is showi ...

laravelif-statementvue.js

Having trouble changing my array state in react?

I'm having trouble understanding why my React state isn't updating with the following code: state = { popUpMessages:[] } popUpMessage(id,name) { console.log("id ",id,"name ",name) const addUserObject = { id, name }; const new ...

javascriptreactjs

You cannot add properties to an object within an async function

I am attempting to include a fileUrl property in the order object within an async function, but I am unable to make it work properly. My expectation is for the order object to contain a fileUrl property once added, but unfortunately, it does not seem to b ...

javascriptarraysexpressasynchronouspromise

Transitioning in Vue.js when data changes

Within the Vue documentation, there is only guidance on showing or hiding elements based on a condition. But what if you want to add a transition based on a change in value? For instance, displaying an upward arrow for 3 seconds when the new value is highe ...

vue.js

Failure to persist Vuex data using createPersistedState

How can I save my Vuex state when the page refreshes? I've tried using createPersistedState, but the data still disappears no matter what. This is my store file: import { createStore } from "vuex"; import createPersistedState from "vuex-persistedsta ...

vue.jsvuex

Having trouble with a 400 bad request error, could the method be incorrect?

Hey there, I'm currently facing a bit of a roadblock and not exactly sure what's causing the issue. My Postman login seems to be working fine, but my backend isn't accepting anything, so I suspect there might be something wrong with my meth ...

vue.js

Node.js C++ addons provide accessors for interacting with Node.js from native

How can I implement setter and getter for a global variable 'X' in a C++ extension for Node.js? I am encountering issues with undefined 'x' while using the getter and setter methods. Currently working on a program involving Accessors ...

javascriptc++node.js

Difficulty in updating Vue variable value following a request

Hello everyone, I am facing an issue regarding a variable value. Within the request, I am comparing each array value to see if there is a match and then updating the match variable to true if a match is found. However, the problem arises when the updated ...

javascripthtmlvue.jsvuejs2frontend

Guide on implementing router view in VUEJS3 for a google chrome extension within a production build

I've been working on creating a Chromium extension using VueJS3 and everything looks great locally. However, when I export it as a Chrome extension, only the first component in my App.js is displayed. What could be causing this issue? ❤︎ Here is ...

vue.jsgoogle-chrome-extensionvue-routervuejs3browser-extension

The filter() and some() functions are not producing the anticipated output

Currently, I am in the process of developing a filtering mechanism to sift through a dataset obtained from an API. The array that requires filtering contains objects with various parameters, but my aim is to filter based only on specific parameters. For ...

javascriptangularfilter

Adapt the class based on different string inputs

I am facing a challenge where I need to dynamically change the div class based on a variable value. The issue is that the variable can have multiple values that should all be considered as true in my case. isActive: "yes" These values can include: "true" ...

vue.js

Leverage Firebase cloud functions to transmit a POST request to a server that is not affiliated with

Is it feasible to utilize a firebase cloud function for sending a post request to a non-Google server? It appears that being on the blaze plan is necessary in order to communicate with non-google servers. Essentially, I aim to perform a POST action to an ...

javascriptfirebasegoogle-cloud-functions

The error message states: "An attempt was made to destructure a non-iterable object. In order for non-array objects to be iterable, they must have a [Symbol.iterator

I need to call a RTK query endpoint from a function const [getCityCode, { isLoading, error, data, isSuccess, isError }] = useLocationQuery(); const getLocationDetails = async () => { const queryItems = { latitude: lat, longitude: long }; await getC ...

javascriptreactjsreact-nativereduxrtk-query

Implementing automatic redirection upon clicking using React without the need for manual clicking

I'm experiencing an issue where the page seems to automatically navigate to another page without clicking on the div. Can anyone explain why this is happening? Here's the code snippet for reference: import React, { Component } from "react&q ...

javascriptreactjsreact-routerreact-router-dom

Interconnected realms communication

I'm currently in the process of developing a Facebook iframe app. At one point, I initiate a friends dialog from Facebook and embed an HTML button to add some customized functionality for my app. dialog = FB.ui({ method:'fbml.di ...

javascriptcross-domain