报错:[Vue warn]: Failed to resolve filter: formatDate

使用Vue时出现报错 [Vue warn]: Failed to resolve filter: formatDate,经查询发现是顺序问题。过滤器应先执行,写在代码上方,再绑定Vue实例,文中还给出了错误代码及调整后的代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用Vue的时候突然报错这个,[Vue warn]: Failed to resolve filter: formatDate
在这里插入图片描述
后面再网上查了才知道这是因为顺序问题:

过滤器应该先执行,写在上面,再绑定vue实例

错误的代码:
在这里插入图片描述
调整后的代码:

在这里插入图片描述

cmmsEquipmentInfoAddAndUpdate.vue:13 [Vue warn]: Property or method "title" 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. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. found in ---> <AddOrUpdate> at src\views\modules\cmmsEquipmentInfo\cmmsEquipmentInfoAddAndUpdate.vue <CmmsEquipmentInfo> at src\views\modules\cmmsEquipmentInfo\cmmsEquipmentInfo.vue <ElTabPane> at packages/tabs/src/tab-pane.vue <ElTabs> at packages/tabs/src/tabs.vue <MainContent> at src\views\main-content.vue <Main> at src\views\main.vue <App> at src\App.vue <Root> cmmsEquipmentInfoAddAndUpdate.vue:13 [Vue warn]: Property or method "title" 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. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. found in ---> <AddOrUpdate> at src\views\modules\cmmsEquipmentInfo\cmmsEquipmentInfoAddAndUpdate.vue <CmmsEquipmentInfo> at src\views\modules\cmmsEquipmentInfo\cmmsEquipmentInfo.vue <ElTabPane> at packages/tabs/src/tab-pane.vue <ElTabs> at packages/tabs/src/tabs.vue <MainContent> at src\views\main-content.vue <Main> at src\views\main.vue <App> at src\App.vue <Root> 点击修改报错了 下面是代码 /** * 新增修改设备管理-设备台账页面 * * @author gucw * @date 2025-06-06 */ <template> <div> <dialog-edit :visible.sync="open" :title="title" @close="handleCancel" dialogType="dialog_edit" width="800px" height="600px" > <div slot="content" class="dialog_content"> <formlist :form="form" :form2="form2" :dictData="dictData" ref="formList" @submit="formListSubmit" :readonly="false" :width="`120px`" ></formlist> <div slot="footer" class="dialog_footer"> <e-submit :option="{ name: '确定', submit: formListSubmit, }" ></e-submit> <el-button @click="handleCancel">取 消</el-button> </div> </div> </dialog-edit> </div> </template> <script> import { addCmmsEquipmentInfo, updateCmmsEquipmentInfo, } from "@/api/cmmsEquipmentInfo/cmmsEquipmentInfo.js"; import { getDictionaries } from "@/utils"; export default { data() { return { form: [ { arr: [ { code: "equipmentCode", title: "设备编码", type: 0, readlyOnly: false, verification: true, rule: "0", customTips: " ", regular: " ", dictionary: "", multiple: false, fileNum: 0, single: true, dateType: "date", dateFormat: "yyyy-MM-dd", }, { code: "equipmentCategory", title: "设备大类", type: 1, readlyOnly: false, verification: true, rule: "0", customTips: " ", regular: " ", dictionary: "equipment_category", multiple: false, fileNum: 0, single: true, dateType: "date", dateFormat: "yyyy-MM-dd", }, { code: "equipmentSubcategory", title: "设备小类", type: 1, readlyOnly: false, verification: true, rule: "0", customTips: " ", regular: " ", dictionary: "equipment_subcategory", multiple: false, fileNum: 0, single: true, dateType: "date", dateFormat: "yyyy-MM-dd", }, { code: "modelDescription", title: "燃气表型号描述", type: 1, readlyOnly: false, verification: true, rule: "0", customTips: " ", regular: " ", dictionary: "model_description", multiple: false, fileNum: 0, single: true, dateType: "date", dateFormat: "yyyy-MM-dd", }, { code: "specificationModel", title: "规格型号", type: 1, readlyOnly: false, verification: true, rule: "0", customTips: " ", regular: " ", dictionary: "specification_model", multiple: false, fileNum: 0, single: true, dateType: "date", dateFormat: "yyyy-MM-dd", }, { code: "accuracyLevel", title: "器具准确度等级", type: 1, readlyOnly: false, verification: true, rule: "0", customTips: " ", regular: " ", dictionary: "accuracy_level", multiple: false, fileNum: 0, single: true, dateType: "date", dateFormat: "yyyy-MM-dd", }, { code: "manufacturer", title: "器具生产单位", type: 0, readlyOnly: false, verification: true, rule: "0", customTips: " ", regular: " ", dictionary: "", multiple: false, fileNum: 0, single: true, dateType: "date", dateFormat: "yyyy-MM-dd", }, { code: "ownershipType", title: "归属类型", type: 1, readlyOnly: false, verification: true, rule: "0", customTips: " ", regular: " ", dictionary: "ownership_type", multiple: false, fileNum: 0, single: true, dateType: "date", dateFormat: "yyyy-MM-dd", }, { code: "equipmentOwner", title: "设备归属方", type: 0, readlyOnly: false, verification: true, rule: "0", customTips: " ", regular: " ", dictionary: "", multiple: false, fileNum: 0, single: true, dateType: "date", dateFormat: "yyyy-MM-dd", }, { code: "purchaseDate", title: "采购日期", type: 6, readlyOnly: false, verification: true, rule: "0", customTips: " ", regular: " ", dictionary: "", multiple: false, fileNum: 0, single: true, dateType: "date", dateFormat: "yyyy-MM-dd", }, { code: "storageLocation", title: "存放位置", type: 0, readlyOnly: false, verification: true, rule: "0", customTips: " ", regular: " ", dictionary: "", multiple: false, fileNum: 0, single: true, dateType: "date", dateFormat: "yyyy-MM-dd", }, { code: "overdueYears", title: "超期年限(年)", type: 0, readlyOnly: false, verification: true, rule: "0", customTips: " ", regular: " ", dictionary: "", multiple: false, fileNum: 0, single: true, dateType: "date", dateFormat: "yyyy-MM-dd", }, { code: "lastVerificationDate", title: "最后检定日期", type: 6, readlyOnly: false, verification: true, rule: "0", customTips: " ", regular: " ", dictionary: "", multiple: false, fileNum: 0, single: true, dateType: "date", dateFormat: "yyyy-MM-dd", }, { code: "equipmentStatus", title: "设备状态", type: 1, readlyOnly: false, verification: true, rule: "0", customTips: " ", regular: " ", dictionary: "equipment_status", multiple: false, fileNum: 0, single: true, dateType: "date", dateFormat: "yyyy-MM-dd", }, { code: "storageStatus", title: "仓储状态", type: 1, readlyOnly: false, verification: true, rule: "0", customTips: " ", regular: " ", dictionary: "storage_status", multiple: false, fileNum: 0, single: true, dateType: "date", dateFormat: "yyyy-MM-dd", }, { code: "inspectionStatus", title: "检测状态", type: 1, readlyOnly: false, verification: true, rule: "0", customTips: " ", regular: " ", dictionary: "inspection_status", multiple: false, fileNum: 0, single: true, dateType: "date", dateFormat: "yyyy-MM-dd", }, { code: "equipmentPhoto", title: "设备照片路径", type: 30, readlyOnly: false, verification: true, rule: "0", customTips: " ", regular: " ", dictionary: "", multiple: false, fileNum: 0, single: true, dateType: "date", dateFormat: "yyyy-MM-dd", }, { code: "remarks", title: "备注", type: 0, readlyOnly: false, verification: true, rule: "0", customTips: " ", regular: " ", dictionary: "", multiple: false, fileNum: 0, single: true, dateType: "date", dateFormat: "yyyy-MM-dd", }, ], }, ], form2: { id: "", // 设备ID equipmentCode: "", // 设备编码 equipmentCategory: "", // 设备大类(字典值) equipmentSubcategory: "", // 设备小类(字典值) modelDescription: "", // 燃气表型号描述 specificationModel: "", // 规格型号 accuracyLevel: "", // 器具准确度等级 manufacturer: "", // 生产单位 ownershipType: "", // 归属类型 equipmentOwner: "", // 设备归属方 purchaseDate: "", // 采购日期(格式:yyyy-MM-dd) storageLocation: "", // 存放位置 overdueYears: "", // 超期年限(数字或字符串) lastVerificationDate: "", // 最后检定日期 equipmentStatus: "", // 设备状态 storageStatus: "", // 仓储状态 inspectionStatus: "", // 检测状态 equipmentPhoto: "", // 设备照片路径 remarks: "", // 备注 }, open: false, dictData: {}, // 添加字典数据存储 }; }, methods: { async init(row) { // 加载字典数据 await this.loadDictData(); this.open = true; this.form2 = {}; this.title = "新增设备管理-设备台账"; if (row && row.id) { this.title = "修改设备管理-设备台账"; this.form2 = JSON.parse(JSON.stringify(row)); if (this.form2.purchaseDate) { this.form2.purchaseDate = this.formatDate(this.form2.purchaseDate); } if (this.form2.lastVerificationDate) { this.form2.lastVerificationDate = this.formatDate( this.form2.lastVerificationDate ); } } else { this.form2 = { equipmentCode: "", // 设备编码 equipmentCategory: "", // 设备大类(字典值) equipmentSubcategory: "", // 设备小类(字典值) modelDescription: "", // 燃气表型号描述 specificationModel: "", // 规格型号 accuracyLevel: "", // 器具准确度等级 manufacturer: "", // 生产单位 ownershipType: "", // 归属类型 equipmentOwner: "", // 设备归属方 purchaseDate: "", // 采购日期(格式:yyyy-MM-dd) storageLocation: "", // 存放位置 overdueYears: "", // 超期年限(数字或字符串) lastVerificationDate: "", // 最后检定日期 equipmentStatus: "", // 设备状态 storageStatus: "", // 仓储状态 inspectionStatus: "", // 检测状态 equipmentPhoto: "", // 设备照片路径 remarks: "", // 备注 }; } }, async loadDictData() { const arr = [ "equipment_category", "equipment_subcategory", "accuracy_level", "ownership_type", "equipment_status", "storage_status", "inspection_status", "model_description", "specification_model", ]; const data = await getDictionaries(arr); this.dictData = { equipment_category: data["equipment_category"] || [], equipment_subcategory: data["equipment_subcategory"] || [], accuracy_level: data["accuracy_level"] || [], ownership_type: data["ownership_type"] || [], equipment_status: data["equipment_status"] || [], storage_status: data["storage_status"] || [], inspection_status: data["inspection_status"] || [], model_description: data["model_description"] || [], specification_model: data["specification_model"] || [], }; }, formatDate(dateString) { if (!dateString) return null; return new Date(dateString).toISOString().split("T")[0]; }, formatToBackendDate(dateString) { return dateString.replace(/-/g, ""); }, // 获取字典 getDictionaries() { return new Promise((resolve) => { let arr = [ "equipment_category", "equipment_subcategory", "accuracy_level", "ownership_type", "equipment_status", "storage_status", "inspection_status", "model_description", "specification_model", ]; getDictionaries(arr).then((data) => { this.equipment_category = data["equipment_category"]; this.equipment_subcategory = data["equipment_subcategory"]; this.accuracy_level = data["accuracy_level"]; this.ownership_type = data["ownership_type"]; this.equipment_status = data["equipment_status"]; this.storage_status = data["storage_status"]; this.inspection_status = data["inspection_status"]; this.model_description = data["model_description"]; this.specification_model = data["specification_model"]; resolve(); }); }); }, // 表单提交的时候 async formListSubmit() { await this.$refs.formList.submit(); await this.submission(); }, submission() { let params = JSON.parse(JSON.stringify(this.form2)); if (this.form2.id) { updateCmmsEquipmentInfo(params).then((res) => { if (res.data.code == 0) { this.$emit("refreshDataList"); this.open = false; this.$message.success("修改成功"); } else { this.$message.error(res.data.msg); } }); } else { addCmmsEquipmentInfo(params).then((res) => { if (res.data.code == 0) { this.$emit("refreshDataList"); this.open = false; this.$message.success("新增成功"); } else { this.$message.error(res.data.msg); } }); } }, // 关闭弹框 handleCancel() { this.$emit("refreshDataList"); this.open = false; }, }, }; </script>
06-11
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值