What causes dates to shift by 24 hours?

I am facing an intriguing datetime dilemma. It seems like I just can't crack it and it's driving me crazy. Perhaps I overlooked something or didn't approach it in the right way.

Currently, I am retrieving data from Mongo using Axios. The data looks like this:

someMethods() {
this.data = this.$axios.get('api_address/sampleparams');
console.log(this.data);
}

https://i.sstatic.net/6gMCu.png

If I attempt to display this data on my template:

<template>
   <div>
      {{ data }}
   </div>
</template>
...

https://i.sstatic.net/PemB2.png

The start date value received from axios is "2020-12-27T21:00:00.000Z", which is correct. However, why does it appear as 1 day less in the template and dom?

My current timezone is GMT+3.

Appreciate any help. Thank you!

Answer №1

Have you attempted using axios for this task?

 axios.get('api_address/sampleparams').then( response => {this.data = response.data});

If you are checking with console.log() and not seeing the updated this.data, it might be worth investigating further.

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

AngularJS error: Uncaught MinError Object

Recently, I started a new AngularJS project and successfully set it up. The installation of angular and angular-resource using bower went smoothly. However, upon installing another service that I have used previously - https://github.com/Fundoo-Solutions/a ...

Vue application encountering issues with the functionality of the split method in Javascript

Hey there! I am just starting out with JS and Vue. Currently, I have a Vue application that pulls date information from an open API. The tricky part is that the API response includes both the date and time in one string (for example: 2019-10-15T09:17:11.80 ...

Table template incompatibility detected with Bootstrap

I have been attempting to recreate a template using a table as my foundation, but simply copying the code does not yield the same results. For reference, here is the table template I am using: Below is the code I have copied and pasted into my index.csht ...

Using a regular expression to replace text within a TextNode with a new DOM node

I am currently working on a function that preprocesses a Text Node within the HTML DOM. The main objective is to carry out interpolation or string templating. Essentially, the function examines occurrences that match the regular expressions /\${([^}] ...

Instructions for using Selenium to access the "stats for nerds" option on a YouTube video by right-clicking

I am currently working on a program that has the ability to block YouTube ads and keep track of the blocked Ad Video IDs. To achieve this, our selenium program needs to simulate a right click on the video to open the video menu and then select "stats for ...

Embed a YouTube video within the product image gallery

Having trouble incorporating a YouTube video into my Product Image Gallery. Currently, the main product photo is a large image with thumbnails that change it. You can see an example on my website here. Whenever I attempt to add a video using the code below ...

Leveraging JavaScript variables within a jQuery selector

My <form> includes the following input... Term ID: <input type="text" name="data_array[0][term_id]" size="5" value="' . $highest_term_id . '"> with the $highest_term_id being set by PHP. I am attempting to increment the "data_array ...

ng-enter animation not working for ui-view nested within another ui-view after page reload

It seems like the issue lies with the ng-enter event not being properly triggered in the lowest level of the ui view hierarchy. I'm unsure how to resolve this problem effectively. In my extensive angularjs application, nested sub-views work flawlessl ...

Could the abundance of JavaScript files in Angular 2 be hindering its performance?

Having experience with Angular 1.x, I am now delving into the world of Angular 2. As I begin, I am struck by the multitude of js scripts required to be added to our index.html file just to get started. Even when excluding angular's own js files and c ...

Incorrectly Scheduled Events in FullCalendar

While using FullCalendar to display dates, I noticed a discrepancy where some dates appear correctly while others do not. The issue seems to be related to events with a start time of 8pm or later. For example, on August 17th, there are two events schedule ...

Is it possible to use JavaScript to upload and manipulate multiple HTML files, replacing text within them to create new output HTML pages?

Is it possible to modify the following code to accept multiple files, process them, and then return the output? <html> <head> </head> <body> <div> <label for="text">Choose file</label> <inp ...

Ways to adjust the size of div and its elements to fit the window dimensions

When resizing the window, the banner image shrinks while the header and header items remain the same size. However, there is an issue when the header takes up around 30% of the screen in phone view. Here is the CSS code I am using: .headerdiv{ width: ...

WebApp specifically designed for iPads that mimics the functionality of a swipe

I am in the process of developing a full-screen web application for an iPad that will showcase a series of images in a slider format. The users should be able to swipe between the images and click on one to view it in detail. Below is an example showcasin ...

What could be the reason for the lack of error handling in the asynchronous function?

const promiseAllAsyncAwait = async function() { if (!arguments.length) { return null; } let args = arguments; if (args.length === 1 && Array.isArray(args[0])) { args = args[0]; } const total = args.length; const result = []; for (le ...

Remove an item from Firebase using React with ES6 syntax

[HELP NEEDED]Seeking solution below Encountering an issue with deleting an object from the Firebase database. I have experience with this, but for some reason it's not functioning as expected: Action: export const firebase_db = firebase.database(). ...

Show the user a number rounded to two decimal places in JavaScript without altering its original precise value

Take for instance this decimal value: let myDecimal = 117.049701384; I need to display 117.05 to the user without altering the original precise value above. I am aiming to replicate Excel's behavior with decimals, showing a number with two decimal ...

Locating the ASP.NET validator's Control with the help of JQUERY or basic Javascript

On my webpage, I have several textboxes with corresponding ASP.NET validators for validation. I know that I can validate all the validators using a JavaScript function: Page_ClientValidate("myvalidators") where "myvalidators" is the group name of my val ...

Route.post() is in need of a callback function, however, it was provided with an [object String

I've been working on developing my own vocabulary app by following and modifying the MDN node/express tutorial. While the MDN tutorial runs smoothly, I'm encountering issues with my version. Below are the errors I'm facing: Error: Route.p ...

Struggling with error management while using react-redux during the SignUp process

https://i.sstatic.net/OD2fl.pngWithin my component code, I handle user sign up and error checking. Initially, the error value is null. let error = useSelector((state) => state.authReducer.error); const checkErrorLoading = () => { ...

How to activate another component's method using Vue.js

my files are structured as follows: ./components/UserCreate.vue ./components/UserList.vue ./main.js inside main.js, my Vue instance is defined as: new Vue({ el: '#user-operations', components: { CreateUser, UserList } }); Th ...