vue过滤器案例：品牌管理时间格式化中的报错问题----vue.js:634 [Vue warn]: Error in render: “TypeError: data.getFullYear is

最新推荐文章于 2023-10-16 18:54:06 发布
最新推荐文章于 2023-10-16 18:54:06 发布
阅读量554 收藏
点赞数
文章标签： vue filter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47531829/article/details/118978341
版权
本文档展示了一个Vue.js应用，用于管理品牌数据，包括添加、删除和搜索功能，并利用localStorage进行数据持久化。在尝试从localStorage加载数据时，遇到了类型错误，因为尝试调用getFullYear()方法的对象不是一个日期实例。问题在于从localStorage恢复的数据没有被正确转换为日期对象。修复此问题的方法是在访问时间属性时确保其为Date类型。
摘要由CSDN通过智能技术生成

用vue过滤器做了一个品牌管理案例，在把页面中的数据存到localStorage缓存中后，vue报了一个错误：vue.js:634 [Vue warn]: Error in render: “TypeError: data.getFullYear is not a function”，

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="./js/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <div class="container">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">增删该查数据</h3>
                </div>
                <div class="panel-body">
                    <form action="" method="POST" class="form-inline" role="form">
                        <div class="form-group">
                            <label for="">id:</label>
                            <input type="number" class="form-control" id="" placeholder="Input field" v-model.value="id" />
                        </div>
                        <div class="form-group">
                            <label for="">car:</label>
                            <input type="text" class="form-control" id="" placeholder="Input field" v-model.value="car" />
                        </div>
                        <button type="button" class="btn btn-success" @click="addCar">
                添加
              </button>
                        <div class="form-group">
                            <label for="">搜索：</label>
                            <input type="text" class="form-control" id="" placeholder="Input field" v-model.value="searchCar" @change="change" />
                        </div>
                    </form>
                </div>

                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>car</th>
                            <th>time</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in change()" :key='item.id'>
                            <td>{{item.id}}</td>
                            <td>{{item.car}}</td>
                            <td>{{item.time | dataFormat('YYYY-MM-DD HH:MM:SS')}}</td>
                            <td>
                                <button type="button" class="btn btn-danger" @click="deleteCar(index)">
                    删除
                  </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script>
        Vue.filter("dataFormat", function(data, format) {
            // console.log(format);
            let YYYY = data.getFullYear();
            let MM = (data.getMonth() + 1).toString().padStart(2, "0");
            let DD = data.getDate().toString().padStart(2, "0");
            let HH = data.getHours().toString().padStart(2, "0");
            let mm = data.getMinutes().toString().padStart(2, "0");
            let SS = data.getSeconds().toString().padStart(2, "0");
            return format
                .replace("YYYY", YYYY)
                .replace("MM", MM)
                .replace("DD", DD)
                .replace("HH", HH)
                .replace("MM", mm)
                .replace("SS", SS);
        });
        let vm = new Vue({
            el: "#app",
            data: {
                id: "",
                car: "",
                searchCar: "",
                carList: [{
                    id: 1,
                    car: "劳斯莱斯",
                    time: new Date(),
                }, {
                    id: 2,
                    car: "大众",
                    time: new Date(),
                }, {
                    id: 3,
                    car: "宝马",
                    time: new Date(),
                }, ],
            },
            methods: {
                // 添加数据
                addCar() {
                    //枚举之前的id
                    let oldIdArr = [];
                    let flag = true;
                    this.carList.forEach((item, index) => {
                        oldIdArr.push(item.id);
                    });
                    //判断输入的id或者car是否为空
                    if (this.id && this.car) {
                        //枚举获取的旧的数组
                        flag = !oldIdArr.includes(+this.id);
                        if (flag) {
                            this.carList.push({
                                id: this.id,
                                car: this.car,
                                time: new Date(),
                            });
                        }
                    } else {
                        this.carList;
                    }
                    localStorage.setItem('carList', JSON.stringify(this.carList))
                },
                // 删除数据
                deleteCar(carId) {
                    this.carList.splice(carId, 1);
                },
                //搜索数据
                change() {
                    return this.carList.filter((value) => {
                        // console.log(value.car);
                        return value.car.includes(this.searchCar);
                    });
                },
            },
            created() {
                console.log(localStorage.getItem('carList'));
                if (localStorage.getItem('carList')) {
                    this.carList = JSON.parse(localStorage.getItem('carList'))
                }
                console.dir(JSON.parse(localStorage.getItem("carList"))[0].time);
                console.dir(new Date());
            },
        });
    </script>
</body>

</html>

上面是源码。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="./js/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <div class="container">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">增删该查数据</h3>
                </div>
                <div class="panel-body">
                    <form action="" method="POST" class="form-inline" role="form">
                        <div class="form-group">
                            <label for="">id:</label>
                            <input type="number" class="form-control" id="" placeholder="Input field" v-model.value="id" />
                        </div>
                        <div class="form-group">
                            <label for="">car:</label>
                            <input type="text" class="form-control" id="" placeholder="Input field" v-model.value="car" />
                        </div>
                        <button type="button" class="btn btn-success" @click="addCar">
                添加
              </button>
                        <div class="form-group">
                            <label for="">搜索：</label>
                            <input type="text" class="form-control" id="" placeholder="Input field" v-model.value="searchCar" @change="change" />
                        </div>
                    </form>
                </div>

                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>car</th>
                            <th>time</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in change()" :key='item.id'>
                            <td>{{item.id}}</td>
                            <td>{{item.car}}</td>
                            <td>{{item.time | dataFormat('YYYY-MM-DD HH:MM:SS')}}</td>
                            <td>
                                <button type="button" class="btn btn-danger" @click="deleteCar(index)">
                    删除
                  </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script>
        Vue.filter("dataFormat", function(data2, format) {
            // console.log(format);

            let data = new Date();


            let YYYY = data.getFullYear();
            let MM = (data.getMonth() + 1).toString().padStart(2, "0");
            let DD = data.getDate().toString().padStart(2, "0");
            let HH = data.getHours().toString().padStart(2, "0");
            let mm = data.getMinutes().toString().padStart(2, "0");
            let SS = data.getSeconds().toString().padStart(2, "0");
            return format
                .replace("YYYY", YYYY)
                .replace("MM", MM)
                .replace("DD", DD)
                .replace("HH", HH)
                .replace("MM", mm)
                .replace("SS", SS);
        });
        let vm = new Vue({
            el: "#app",
            data: {
                id: "",
                car: "",
                searchCar: "",
                carList: [{
                    id: 1,
                    car: "劳斯莱斯",
                    time: new Date(),
                }, {
                    id: 2,
                    car: "大众",
                    time: new Date(),
                }, {
                    id: 3,
                    car: "宝马",
                    time: new Date(),
                }, ],
            },
            methods: {
                // 添加数据
                addCar() {
                    //枚举之前的id
                    let oldIdArr = [];
                    let flag = true;
                    this.carList.forEach((item, index) => {
                        oldIdArr.push(+item.id);
                    });
                    //判断输入的id或者car是否为空
                    if (this.id && this.car) {
                        //枚举获取的旧的数组
                        console.log(oldIdArr);
                        console.log(this.id);
                        flag = !oldIdArr.includes(+this.id);
                        if (flag) {
                            this.carList.push({
                                id: this.id,
                                car: this.car,
                                time: new Date(),
                            });
                        } else {
                            alert('您输入的id与之前重复')
                        }
                    } else {
                        this.carList;
                    }
                    localStorage.setItem('carList', JSON.stringify(this.carList))
                },
                // 删除数据
                deleteCar(carId) {
                    this.carList.splice(carId, 1);
                    localStorage.setItem('carList', JSON.stringify(this.carList))
                },
                //搜索数据
                change() {
                    return this.carList.filter((value) => {
                        // console.log(value.car);
                        return value.car.includes(this.searchCar);
                    });
                },
            },
            created() {
                console.log(localStorage.getItem('carList'));
                if (localStorage.getItem('carList')) {
                    this.carList = JSON.parse(localStorage.getItem('carList'))
                }
                console.dir(JSON.parse(localStorage.getItem("carList"))[0].time);
                console.dir(new Date());
            },
        });
    </script>
</body>

</html>

最终版

A &......
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vuejs-logger:为Vue.js提供可自定义的日志记录功能。 兼容Vue2
05-25
为Vue.js提供可自定义的日志记录功能。 与Vue2兼容。 目录 执照 演示版 @ https://codepen.io/justinkames/pen/BwGOVQ 介绍 vuejs-logger是一个工具，可为Vue应用程序启用可配置的日志记录。 功能包括： 基于所...
vue-mobile-log:轻巧的Vue2.0移动日志实用程序。（正在运行...）
05-15
vue-mobile-log截屏要求vue@^2.3.0文件中文文档（建设中） 英语（工作）快速开始1.在项目路径中： npm install vue-mobile-log 2.进口： import Vlog from 'vue-mobile-log'Vue . use ( Vlog ) ;//orVue . use ( ...
[Vue warn]: Error in render: "TypeError: date.getFullYear is not a function" found in
莫不静好
05-11 1万+
添加完毕点击“修改”按钮时报错 解决方案如下 1、rerurn 定义时，设置为null 2、在时间控件添加 value-format
Error in render: “TypeError: date.getFullYear is not a function“ -- 进入修改弹窗界面后，点击时间控件错误
最新发布
m0_53682699的博客
10-16 1123
错误出现后，我立马自查代码。Date 类型导致的。排除以上可能后，该错误基本就是由日期对象不是。
使用element的DateTimePicker报错Error in render: “TypeError: date.getFullYear is not a function“
舒婷的博客
07-28 3392
编辑数据时，点击清空时间重新选中都没什么问题，但一点击显示的时间准备修改就会报错 看了type，格式都没什么问题 原因：后端数据返回时是string格式！！所以会报以上错误 解决：将v-model绑定的时间转换成格林威时间就可以了 item.dueTime = new Date(item.dueTime) ...
格式化时间Date()回显出现报错 TypeError: date.getFullYear is not a function 解决方法
蓝胖子的博客
01-12 2869
需要加上：var time = new Date(time); 就可以了 _timeFormat(time) { // 时间格式化 2019-09-08 console.log(time,"++") var time = new Date(time); let year = time.getFullYear(); let month = time.getMonth() + 1; le.
UnCaught TypeError:date.getFullYear is not a function解决方案
vue
05-04 1万+
只想看解决方案的，可看红字！ 今天在公司做项目，要求在前台显示一个只显示年月日的日期。 我在数据库存的类型是date（此处要说一下date与datetime的区别：date年月日；datetime年月日时分秒），实体类的是java,util.Date。 到前台加载数据时，却显示出是时分秒，因为数据库中的数据没有时分秒，这里直接补成00：00：...
2020-web前端-vue项目出错-[Vue warn]: Invalid prop: custom validator check failed for prop “index”.
01-08
1.在写循环的时候遇见这个的 原创文章 96获赞 50访问量 6万+ 关注 私信 展开阅读全文 作者：itwangyang520
Vue.js 中的 v-show 指令及用法详解
10-17
Vue.js 是一个流行的前端JavaScript框架，它提供了丰富的指令系统，帮助开发者轻松地处理视图层的动态性。本文将深入探讨Vue.js中的`v-show`指令及其使用方法。 ### v-show 指令的用法 `v-show`指令允许我们在运行...
learningVue：Vue.js原始码解析
02-06
学习Vue介绍Vue.js源码分析，记录了个人学习Vue.js源码的过程中的一些心得以及收获。以及对于Vue框架，周边库的一些个人见解。在学习的过程中我为Vue.js（2.3.0），Vuex（2.4.0），Vue-router（3.0.1）加上了注释，...
date.getFullYear is not a function 解决方案
热门推荐
imkaifan的博客
11-20 1万+
开门见山 Thu May 12 2016 08:00:00 GMT+0800 (中国标准时间) 转换为年月日的时候会有以上的报错 原因： getFullYear() 方法只能用于new Date()格式的时间。 components.value1 = Thu May 12 2016 08:00:00 GMT+0800 var date = new Date(components.value1); var y = date.getFullYear(); var m = date.getMont
TypeError: value.getTime is not a function
乔瑞的博客
05-17 5181
错误：         TypeError: value.getTime is not a function，iview验证时间时出现此错误原因：        iview验证时必须传入时间格式，否则就会出现此问题解决：        在修改时就把时间转换成时间格式，我的日期格式是‘20180517’格式，这样的必须先转换成日期类格式才能new data（），否则new data（）无法识别if ...
element选择时间报错（赋予了一个时间值之后）
Codernmx
05-20 840
报错vue.runtime.esm.js?6e6d:619 [Vue warn]: Error in render: “TypeError: date.getFullYear is not a function” found in 是因为当前赋予的时间和设置的时间格式不一致 比如这里我给了一个2021-05-08 设置又是yyyy-MM-dd HH:mm:ss格式 自己修改为一致就可以解决了。 ...
element报错 “t.getFullYear is not a function” ，TypeError：date.getHours is not a function
lojieo的博客
05-20 7443
<el-date-picker v-model="setDate" type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" placeholder="选择日期" > </el-date-picker> setDate:'' 总结：类型错误导致报错，date里面的值得类型不对，应该为字符串，而非其他类型 t.getFu...
element ui中时间选择器date.getfullyear is not a function问题
Dax1_的博客
11-16 9048
最近在vue项目重，element-ui中的时间选择器，选定时间后，对时间进行转换时遇到了问题，复现如下 时间选择器 <el-form-item label="时间" style="margin-left: 20px"> <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间"
Vue报错：vue.js:634
Fanor_的博客
05-25 2413
Vue报错 vue.js:634 [Vue warn]: Property or method “incr” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. <div id
[Vue warn]: Error in render: “TypeError: data.reduce is not a function“found in报错详解
qq_920189602的博客
10-21 4480
报这个错是因为赋值类型问题，我使用的是elementUI框架的el-table组件来开发的。<el-table :data="tableData">里面中的tableData接收的是一个数组，你不能给它一个对象或者其它类型的，不然就会报这个错误，这种报错在使用elementUI框架的表单<el-form :model="form">时也会常出现这种报错问题 问题总结： 出现这种错误很可能是在使用elementUI框架的el-table组件时，里面的:data="ta...
date.getFullYear is not a function
survivorsfyh的博客
05-10 5276
该方法 date.getFullYear is not a function 仅作用域为时间格式的情况下,提示该异常极大可能是数据的格式与方法不匹配; 解决办法 事先将需要处理的数据进行格式的转译后再调用时间相关的方法或者在时间转换的公共方法中默认预先转译一次 dateFormat(fmt, dateValue) { /* * 日期格式转换 * fmt 将要转换的格式样式 * date 需转换的时间 * con
CSDN MarkDown 操作手册 源码语法
qq_41358964的博客
09-09 424
@[TOC](这里写自定义目录标题) # 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 **Markdown编辑器** 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 ## 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 1. **全新的界面设计** ，将会带来全新的写作体验； 2. 在创作中心设置你喜爱的..
报错vue.js:634 [Vue warn]: Error in render: "ReferenceError: moment is not defined"
05-23
这个错误提示是因为在 Vue 的渲染过程中，moment 这个变量未被定义。可能是因为你没有正确地引入 moment 库，或者在使用 moment 库之前未初始化。 请确保在使用 moment 库之前，先在你的项目中正确地引入了 moment ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值