Question

我想用.toLocaleDateString()转换日期，但是我无法弄清楚下面的代码出了什么问题。我试图将todo.dueAt传递给在<script>标记下定义的方法，该方法将返回转换后的日期，但是我遇到了相同的TypeError: todo.dueAt.toLocaleDateString is not a function"问题。

为什么它应该是一个函数，为什么它仅与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>

Answer 1

编辑： 答案假定值todo.dueAt是有效的时间戳，可以直接转换为Date对象。如果dueAt的格式未知，请不要使用它

一种方法是用new Date()包装todo.dueAt 即使参数是Date类型，构造函数也可以包装，因此可以确保时间是有效的Date对象

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

即使dueAt已经是一个Date，将其包装也不会造成问题

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

更好的解决方案是在操作之前检查该值是否为Date（）的实例

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

如何解决Vue.js中的“ TypeError：不是函数”错误？

1 个答案: