vue数据更新了，但视图不刷新的诡异问题 this.$set
在 Vue 2 开发中，我们经常会遇到数据更新了，但视图不刷新的诡异问题。尤其在你这份保养规则配置的业务代码中，批量填充首次保养时间、单个选择日期时，强制刷新$forceUpdate无效、视图不更新，核心原因就是Vue 2 无法检测对象新增 / 未监听属性的变更，唯一的标准解决方案就是使用this.$set
handleRuleConfirm(selectedRules) { //每次保存时存储原始数据并去重 this.selectedRules = selectedRules; // 按 locationId 合并数据 const groupedData = selectedRules.reduce((acc, item) => { // 添加 stateName 字段 item.stateName = item.state == 1 ? "正常" : "停用"; // 添加 isCss 字段 item.isCss = false; //默认当天 this.$set( item, "planTime", this.$utils.dateFormat("yyyy-MM-dd 00:00:00", new Date()) ); const locationId = item.locationId; if (!acc[locationId]) { acc[locationId] = { locationName: item.locationName, locationLabel: item.locationLabel, locationId: item.locationId, locationCode: item.locationCode, data: [], }; } acc[locationId].data.push(item); return acc; }, {}); // 转换为数组 this.listData = Object.values(groupedData); // 设置所有折叠面板默认展开 this.activeNames = this.listData.map((_, index) => index.toString()); console.log(this.activeNames, "this.activeNames"); this.$message.success(`已选择 ${selectedRules.length} 条保养规则`); },初次给对象新增添加字段时使用
this.$set( item, "planTime", this.$utils.dateFormat("yyyy-MM-dd 00:00:00", new Date()) );