Creating a unique function to map an array in VueJS specifically designed for table manipulation

I am currently working on displaying and sorting data in a bootstrap table within VueJS.

My goal is to change the date format within an array retrieved from an API endpoint. The original date format is in "January 21, 2010" and I need it to be in "MM/DD/YYYY" format for proper sorting in the bootstrap table. Each cell in the table consists of multiple values that are concatenated together. While mapping the array, I used the join function for most fields but for the date field, which always contains a single value, I wanted to create a custom function to convert the date format (e.g., January 21, 2010 to 01/21/2010) directly in the methods section rather than using the join method.

However, when I tried declaring this function in the methods section, I encountered the following error: [Vue warn]: Error in render: "TypeError: item.LastUpdatePostDate.newFunction is not a function" How can I resolve this issue? Is there a more efficient way to handle the date format conversion?

computed: {
    mappedItems() {
      return this.items.map((item) => {
        return {
          Ids: item.Ids.join(""),
          Acronyms: item.Acronyms.join(", "),
          LastUpdatePostDate: item.LastUpdatePostDate.newFunction(),
        };
      });
    },
    
  },
  methods: {
    newFunction: function () {
      
      return arguments
      
    },}

Answer №1

When working with the value of item.LastUpdatePostDate, keep in mind that it is a string and does not have a built-in newFunction. You can access the newFunction method through this.newFunction, passing the date string as an argument:

LastUpdatePostDate: this.newFunction(item.LastUpdatePostDate),

The newFunction function itself might resemble something like this:

newFunction: function (dateString) {
    let [monthName, day, year] = dateString.match(/\w+/g);
    let month = "JanFebMarAprMayJunJulAugSepOctNovDec".indexOf(monthName.slice(0, 3)) / 3 + 1;
    return `${day}/${month}/${year}`.replace(/\b\d\b/g, "0$&");
}

You could consider renaming it to be more descriptive ;)

Answer №2

You should not try to directly call a Vue method on a value.

Instead, pass the value as an argument to the method:

...
    LastUpdatePostDate: this.newFunction(item.LastUpdatePostDate),
...
newFunction(date) {
    // perform operations with date
    return newValue
}
....

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

Issues with React in a Production Environment

After successfully developing a react app and express API that worked correctly in localhost, I decided to move my API to a digitalocean droplet. The droplet only had an IP address and used HTTP. While utilizing the API from the react app in development m ...

Issue: The 'loopback' module is not found in the NodeJS environment

I can't seem to solve the issue I'm experiencing. Error: Module 'loopback' not found These are the dependencies listed in my package.json file: "loopback": "^3.19.0", "loopback-boot": "^2.6.5", "loopback-component-explorer": "^6.0. ...

The Material UI list element fails to appear on the screen

I am encountering an issue where I am trying to display a Material UI list within a drop-down menu (using the Material UI drawer component) for mobile view, but the actual list is not appearing as expected. The code snippet for the list is as follows: con ...

Unexpected quirks in Canvg conversion: Strange behavior observed while utilizing a fill URL

I am attempting to use the canvg javascript library to convert an svg to canvas. Within the original svg, there is a rectangle with a fill attribute that references a svg pattern. However, when I convert the svg to canvas using canvg: canvg(document.getE ...

Encountered an issue while installing npm dependencies for webtorrent: "Error: Unable to locate 'fs' - Fountain-Js (Yeoman)"

Having trouble installing an NPM dependency in my code. Successfully installed the module using this command: npm install --save webtorrent This is the content of my package.json file: ./package.json { "dependencies": { "angular": "^1.5.0" ...

Flattening an array of Map in Typescript involves combining all the

I am working with an array containing entries of type Map<string, number> Is there a way to flatten this array into a single map? Map<string, number>[] converted to Map<string, number> Appreciate any help on this matter. ...

Develop an onclick function with an href attribute

I am interested in transforming links into AJAX versions whenever possible. To achieve this, I plan to implement a function called replaceLinks that will add an onClick handler to each link on the page and trigger ajaxPageWSM(href). This is what I currentl ...

Exploring Nuxt3: Child routes and highlighting the active class in a navigation bar

Currently, I have a navigation menu where one of the links directs to "/users" (Nuxt3 project). When navigating to the "/users" route, there is a subnavigation link leading to "/users/groups". However, when I arrive at the "/users/groups" route, the main ...

A configuration for ".node" files is missing: specifically, the loader for node_modules/fsevents/fsevents.node in a project using Vite

Everything was running smoothly in my Vite + React project until last week when out of nowhere, I encountered this error: No loader is configured for ".node" files: node_modules/fsevents/fsevents.node node_modules/fsevents/fsevents.js:13:23: 1 ...

Creating a reverse progress bar in HTML and Javascript that incorporates a countdown date

I'm struggling to find a way to create a progress bar that empties as it gets closer to the countdown date. I came across two different examples that I think could be merged, but I'm not sure how to do it: Countdown - https://www.jqueryscript. ...

Error encountered: Unable to access the 'Lastname' property as it is undefined

Even though the console displays the value of $("#surname").val(), I am still encountering an error. Could it be that the script is executing before the form is dynamically built? $(function () { $("#addEmployeForm").submit(function (event) { ...

How to enable drag-and-drop functionality for an iframe?

I've successfully made a chat widget draggable using react-draggable. However, the chat widget is also consumed by an iframe created entirely with HTML. I need the iframe to be draggable as well, but react-draggable doesn't support this. Are ther ...

Tips for switching the irregular polygon shape image on click and hoverIf you want to change

I'm looking to create a unique menu with an irregular shape in Adobe Illustrator. I've attempted the following code: <div class="body_container"> <img src="img/sitio_Web.png" alt="" usemap="#sitio_Web_Map" height="787" bor ...

Show the list in a circular buffer fashion

I am working on a project that involves creating a unique UI element. In Frame #2 of my professionally designed diagram, I envision a list that functions as a ring buffer/rolodex when it exceeds four items. The list would scroll in a loop with the top and ...

Tips on waiting for an event to be processed during a Protractor end-to-end test

I have a straightforward AngularJs 1.4.8 Front-End: https://i.stack.imgur.com/2H3In.png After filling out the form and clicking the OK button, a new person is added to the table. The form resides in the addingPersonController, while the table is control ...

Selecting content loaded via Ajax using jQuery

I recently implemented a library that I found at this website According to the documentation, I need to use the following syntax: autosize($('textarea#description')); This works fine for regular elements, but when my textarea is loaded via aja ...

Exploring the world of jQuery animation and background colors with Animate()

I'm currently attempting to implement a basic pulse effect by utilizing JQuery to modify the background color. However, I am facing issues with animating the backgroundColor property. function show_user(dnid) { /* dnid represents the HTML ID of a ...

Installing and loading Node.js modules on the fly

I am currently developing a Node.js module called A that relies on another Node.js module, B, from NPM. With new versions of module B being released on NPM, I want my module A to automatically update to the latest version of module B (ensuring it always us ...

What could be the reason my Angular interceptor isn't minified correctly?

I have come across this interceptor in my Angular project: angular.module('dwExceptionHandler', []) .factory('ExceptionInterceptor', ['$q', function ($q) { return function (promise) { return promise.th ...

"Troubleshooting a Node.js JWT issue in a React.js

I've been diving into backend development and recently created some small APIs. They all function perfectly in Postman, but I encountered an issue when attempting to execute this particular call const onSubmit = async () => { try { setIsL ...