Executing the date function twice within vue.js

Recently, while working on my HTML blade, I created a Showdate function. However, I encountered a strange issue where the code seemed to run twice and output the data two times. The function had been functioning perfectly before this incident. Below is the code snippet inside the blade:

<div v-for="day in Days">
                <p >@{{ShowDate(day.Date)}}</p>
</div>

When running the above code with

Days:[{Date:"2021-03-06"},{Date:"2021-03-07"},{Date:"2021-03-08"}]
, the console logged the following results:

        2021-03-07
        2021-03-08
        2021-03-06
        2021-03-07
        2021-03-08
        2021-03-06

Here is the function causing the issue:

ShowDate: function(date) {
            return date
          },

Answer №1

There is no necessity for utilizing this function. You can directly access the Date property of the day like this:

<p>@{{day.Date}}</p>

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

ui-grid-draggable-rows mistakenly identifies my data as a simple string

After successfully setting up the ui-grid-draggable-rows functionality by following the provided instructions, I encountered an error while running the code snippet from the example here. The error message I received is as follows: TypeError: this.spli ...

The remaining visible portion of a viewport is equivalent to the height of an element

Is there a way to dynamically set a div's height so that it expands from its starting position to the end of its parent div, which is 100% of the viewport minus 20 pixels? Here is an example of how you can achieve this using jQuery: $(document).read ...

React's setState() not reflecting state changes when clicked

I have developed a component that displays data from a Redux store grouped by week. To ensure the week's relevance is maintained within this component, I decided to store its value in local state as shown below: constructor(props) { super(props ...

Navigate through PNG image - proceed only if the clicked area is transparent

Imagine having an image that looks like this: https://i.sstatic.net/Ab6aW.jpg I am looking to make it so that when I click on the transparent areas of the image, the click should pass through to the element below. However, if I click on a non-transparent ...

Exploring Angular 11 Testing: Troubleshooting Async Issues in Jest with RxJS Timer

I encountered an issue while working on a test where I received the following error message: "Timeout - Async callback was not invoked within the 5000 ms timeout specified by jest.setTimeout.Error: Timeout - Async callback was not invoked within the 5 ...

A class with Three.js

I attempted to consolidate all the necessary functionalities into a single class to create a straightforward three.js scene with a cube. Despite not encountering any errors, the scene remains black when viewed in the browser. Here is the code I've wri ...

Creating a single factory that consolidates multiple return statements

Exploring the ins and outs of AngularJS, I find myself eager to learn how to effectively combine two factory modules. Specifically, I am interested in merging the following two: // Factory Module One services.factory('UserService', function ($re ...

What's going on with this unresponsive button in the login system?

I am facing an issue where my code does not respond when I click the login button with the correct login details. Following some suggestions from the comments, I have modified the code to include an onClickHandler function. However, I am unsure which arg ...

Is there a way for me to retrieve the value associated with a specific key within this JSON object?

Looking to extract the error message from _body. My current method involves: console.log(message._body.error); Unfortunately, this returns undefined. If I try console.log(message._body); I receive "{"code":141,"error":"This phone number exists already ...

Unable to switch the text option

[Fiddle] I'm currently working on a project where I want pairs of buttons to toggle text by matching data attributes. While I can successfully change the text from "Add" to "Remove" on click, I am facing an issue with toggling it back to "Add" on the ...

mapStateToProps was invoked, however componentDidUpdate did not trigger

Working on fetching data for GameChart from an API and updating the Redux state. In my GameChart.jsx file, I have a chart that gets rendered when componentDidUpdate is called. However, there are times when changing the Redux state does not trigger componen ...

Bypass the pre-commit hook when using the "npm version" command

When using the npm version command, it will commit the change to package.json and create a tag. Is there a method to avoid the execution of commit hooks? ...

Having trouble selecting elements that have been dynamically generated through an Ajax callback function

During an AJAX callback, I am trying to insert a DIV with a unique ID into another specific DIV called A. However, after each call, if the div with the given id is not found as a child element of DIV A, a new DIV is created and appended. Strangely, every t ...

Extracting data from string in object form

Values are stored as JSON objects in my database. After retrieving these values, the result is: '["{ zone :1, cat_id : 1, subcat : 2}","{ zone :1, cat_id : 2, subcat : 2}","{ zone :1, cat_id : 2, subcat : 3}"]' I then convert it to an array us ...

Immersive Visual Symphony through Dynamic Multi-Layered

My goal is to create captivating animations for my multiple background images. Here's the CSS code I've come up with: .header { background-image: url('/img/cloud2.png'), url('/img/cloud3.png'), url('/img/cloud1.png&apos ...

New options for outdated Webpack i18n plugin and loader

I am currently working on a TypeScript project that requires loading translations from individual .json files assigned to each country. For instance, we would have separate language files like en.json, es.json. The goal is to be able to access these trans ...

Trigger an alert when a button is clicked and redirect the user to an newly opened tab

I recently created a button with a link that opens in a new tab. I also implemented some JavaScript to display an alert. Everything is working as expected, but after the user clicks "OK" on the alert, they remain on the same page. I would like to automati ...

Using Vue Test Utils to simulate window scrolling

Looking for guidance on testing a window scroll event using vue-test-utils. Here is the Javascript code: export default { created () { window.addEventListener('scroll', this.topBResize); }, methods: { topBResize () { var he ...

The use of set.has in filtering does not produce the desired outcome

I am attempting to use Set.has to filter an array in the following way: const input = [ { nick: 'Some name', x: 19, y: 24, grp: 4, id: '19340' }, { nick: 'Some name', x: 20, y: 27, grp: 11, id: '19343' }, { ...

Activating/Deactivating Textbox on Internet Explorer 9 using Javascript

It can't be due to browser discrepancies because I also tested it in Chrome. Is there possibly an error in my code? The checkbox is supposed to disable the textbox when clicked, but that's not happening. Here is the code I am using: I placed the ...