vue el-date-picker ie10赋值不生效,使用Vue2.x $set()解决问题

李维亮

发布于 2021-07-08 10:07:14

1.2K0

vue el-date-picker ie10赋值不生效，直接赋值在IE下不合法，要使用this.$set()方法来解决

<el-date-picker placeholder="选择日期" v-model="form.expireTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%;" size="small" ></el-date-picker>

当然有可能也是你在标签中增加placeholder="选择日期"导致的，可以尝试改成下面的样子

<el-date-picker v-model="form.expireTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%;" size="small" ></el-date-picker>

或者使用下 Vue2.x $set() vue2.x 给data对象新增属性，并触发视图更新如下代码，给 student对象新增 age 属性

data () {
    return {
        student: {
            name: '',
            sex: ''
        }
    }
}

众所周知，直接给student赋值操作，虽然可以新增属性，但是不会触发视图更新

mounted () {
    this.student.age = 24
}

原因是：受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。

要处理这种情况，我们可以使用$set()方法，既可以新增属性,又可以触发视图更新。

但是，值得注意的是，网上一些资料写的$set()用法存在一些问题，导致在新接触这个方法的时候会走一些弯路！

错误写法：this.$set(key,value)（ps: 可能是vue1.0的写法）

mounted () {
    this.$set(this.student.age, 24)
}

正确写法：this.$set(this.data,”key”,value’)

mounted () {
    this.$set(this.student,"age", 24)
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018-11-26J，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

vue.js

登录后参与评论

0 条评论

热度

vue el-date-picker ie10赋值不生效,使用Vue2.x $set()解决问题

vue el-date-picker ie10赋值不生效,使用Vue2.x $set()解决问题

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐