Making a custom function for a mapped array in VueJS for a table

Question

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

I am trying to replace the date format in an array from January 21, 2010 format to MM/DD/YYYY format so it can be properly sorted by a bootstrap table. The array that is coming from the API has multiple values that are joined to fill one cell in the table. In order to do this, I have been using the join function on the mapped array. For the date field, since there is only ever one value, instead of joining I wanted to create a custom function that would change the date format as stated from ex. January 21, 2010 to 01/21/2010. I was planning on just hard coding this in methods.

When I attempted to declare a function in methods I keep getting the following error: [Vue warn]: Error in render: "TypeError: item.LastUpdatePostDate.newFunction is not a function" How would I go about fixing this? Is this a very inefficient way to change the date?

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
      
    },}

trincot · Accepted Answer · 2021-04-11 19:19:28Z

2

The value item.LastUpdatePostDate is a string... it has no newFunction method. The newFunction method is available via this.newFunction, and you should pass the date string as argument:

LastUpdatePostDate: this.newFunction(item.LastUpdatePostDate),

newFunction itself could look 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$&");
}

But maybe give it a more telling name ;-)

answered Apr 11, 2021 at 19:19

trincot

357k38 gold badges282 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tauzN · Accepted Answer · 2021-04-11 19:27:53Z

1

You cannot call a vue method on a value.

Call the method with the value as argument:

...
    LastUpdatePostDate: this.newFunction(item.LastUpdatePostDate),
...
newFunction(date) {
    // do stuff with date
    return newvalue
}
....

edited Apr 11, 2021 at 19:27

answered Apr 11, 2021 at 19:21

tauzN

7,4872 gold badges22 silver badges23 bronze badges

Collectives™ on Stack Overflow

Making a custom function for a mapped array in VueJS for a table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related