How to resolve "TypeError: is not a function" error in Vue.js?

Question

I would like to transform a date with the .toLocaleDateString() but I can't figure out what is wrong with the code below. I have tried to pass todo.dueAt to a method defined under the <script> tag which would return with the transformed date, but I got the same TypeError: todo.dueAt.toLocaleDateString is not a function"issue.

Why it should be a function at all and why is it work only with the todo.dueAt?

<template>
    <div class="todo-table">
      <table>
        <thead>
        <tr>
          <th>Done</th>
          <th>Title</th>
          <th>Created</th>
          <th>Due Date</th>
        </tr>
        </thead>
        <tbody>
          <tr v-for="todo in todos" :key="todo.id">
            <td> {{ todo.isCompleted}}</td>
            <td> {{ todo.title }}</td>
            <td> {{ todo.dueAt.toLocaleDateString("hu-HU") }}</td>
            <td> {{ todo.dueAt.toLocaleDateString("hu-HU") }}</td>
          </tr>
        </tbody>
      </table>
    </div>
</template>

<script>
export default {
  name: "TodoList",
  props: {
    todos: Array
  },
  method: {
    formatDate: (date) => {
      return date.getFullYear() + "." + (date.getMonth() + 1) + "." + date.getDate();
    }
  }
}
</script>

todo.dueAt is really of type Date? It could be of type string, and that's a reason for this error — reisdev
– reisdev, Commented Oct 9, 2019 at 16:41
Please show us an example of what is in your todos array. Are you sure that todo.dueAt exists and is a Javascript Date object? Does your browser support toLocaleDateString yet? You can check that by executing console.log((new Date()).toLocaleDateString) in your dev console and making sure that it returns a function and not undefined. — Sarah Groß
– Sarah Groß, Commented Oct 9, 2019 at 16:43
Thank you All! You were right, todo.dueAt was converted to a string during fetch and that caused the problem. — Hordon
– Hordon, Commented Oct 9, 2019 at 17:06

Dhananjai Pai · Accepted Answer · 2019-10-09 16:56:21Z

2

Edit: The answer assumes the value todo.dueAt is a valid timestamp and can be converted to a Date object directly. Please do not use this if the format of dueAt is not known

One way is to wrap the todo.dueAt with a new Date() The constructor can wrap even if the parameter is a Date type, so it will ensure that the time is a valid Date object

 <tr v-for="todo in todos" :key="todo.id">
            <td> {{ todo.isCompleted}}</td>
            <td> {{ todo.title }}</td>
            <td> {{ todo.dueAt && new Date(todo.dueAt).toLocaleDateString("hu-HU") }}</td>
            <td> {{ todo.dueAt && new Date(todo.dueAt).toLocaleDateString("hu-HU") }}</td>
          </tr>

Even if the dueAt is already a Date, wrapping it will not create a problem

console.log(new Date(new Date()));

A better solution is to check if the value is an instance of Date() before the operation

(todo.dueAt instanceof Date) ? /*use LocaleDateString*/ : /* Convert and use */

edited Oct 9, 2019 at 16:56

answered Oct 9, 2019 at 16:45

Dhananjai Pai

6,0052 gold badges12 silver badges25 bronze badges

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

8 Comments

Andreas Over a year ago

Instead of adding a workaround TO should fix the source of the problem.

Sarah Groß Over a year ago

Also you are just guessing that their current todo.dueAt contains something that is convertible to a date. It could be a string in any arbitrary format or a unix timestamp (and in that case you wouldn't know whether in seconds or miliseconds)...

Hordon Over a year ago

Thank you @DhananjaiPai! Yes, the problem was that the todo.dueAt was Date in the back-end but after JSON fetch, it converted to a String, but this solution converted it back without problem.

str Over a year ago

That's because JSON does not have date type. You should ensure that your backend creates a date string which is a valid date time string in JavaScript.

Rich Over a year ago

Probably better to convert to Date in the subscription, rather than in the template. Store the value as a Date in memory, rather than as a string.

|

Collectives™ on Stack Overflow

How to resolve "TypeError: is not a function" error in Vue.js?

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related