element的时间日期范围组件,后台获取数据赋值后无法改变,change事件也不触发解决方法

背景:在使用日期范围组件的时候,从后台获取的时间赋值上去,再进行时间修改时,时间无法修改,而且change时间也无法触发

解决方法:使用set赋值

原代码:

this.$api.findInfo(id)
            .then((res) => {
                // 处理起始时间
                this.getForms.entrantFamilies.forEach(item => {
                let list = [item.startDate,item.endDate]
                item.timeDate = list
              
                });
            })
            .catch((error) => {
              this.$message.error("网络错误,稍后再试");
            });
............
        

修改后

this.$api.findInfo(id)
            .then((res) => {
                // 处理起始时间
                this.getForms.entrantFamilies.forEach(item => {
                let list = [item.startDate,item.endDate]
                //  item.timeDate = list
                this.$set(item,"timeDate",list) //改为$set
                });
            })
            .catch((error) => {
              this.$message.error("网络错误,稍后再试");
            });
............
        

### 关于 Element UI 中 `el-select` 组件手动赋值触发 `change` 事件的问题 在使用 Element UI 的 `el-select` 组件时,如果通过程序逻辑手动修改其绑定的模型值(即 `v-model`),并会自动触发 `@change` 事件[^1]。这是因为 `@change` 事件仅会在用户交互操作下被触发,而非由代码直接更改数据引发。 #### 解决方案 以下是几种常见的解决方案: 1. **利用 `$emit` 手动触发事件** 可以通过显式调用组件实例的方法来模拟用户的交互行为并触发相应的事件。例如,在手动设置 `v-model` 值之后,可以主动触发 `change` 或者自定义事件。 ```javascript this.arcCategory = newValue; this.$refs.selectRef.blur(); // 如果需要同步视图状态可尝试此方法 this.$nextTick(() => { this.$emit('change', newValue); }); ``` 2. **采用 Watcher 监听变化** 使用 Vue 提供的数据观察机制——`watch` 来监控目标变量的变化情况,并执行必要的业务逻辑处理。这种方法适用于那些希望实时捕获任何可能引起该字段改变的情况下的场景[^1]。 ```javascript watch: { arcCategory(newVal, oldVal) { console.log(`Value changed from ${oldVal} to ${newVal}`); this.handleArcCategoryChange(newVal); // 自定义回调函数 } }, methods: { handleArcCategoryChange(value){ // Your logic here... } } ``` 3. **重新初始化 Select 组件** 当某些特殊情况下发现即使设置了新值也无法正常显示或者工作,则考虑销毁再重建当前的选择器实例可能会有所帮助。过这种方式通常作为最后手段使用,因为性能开销较大且复杂度较高。 4. **理解 V-Model 工作原理优化实现方式** 根据官方文档说明以及实际案例分析得知[vue-set](https://cn.vuejs.org/v2/api/#Vue-set),当动态新增对象属性至已有响应式结构中时需特别注意如何正确注册这些新增部分使之成为可观测单元;另外对于数组类型的更新同样需要注意索引访问形式的影响等问题[^3]。 综上所述,推荐优先选用第二种办法即借助 watcher 完成需求满足的同时保持较好的维护性和扩展性。 ```python def example_function(): pass ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值