Vue2动态添加属性方式

Vue2不允许在已经创建的实例上动态添加新的响应式属性;若想实现数据与视图同步更新,可采取下面两种解决方案:

1.使用Vue.set,里面的参数是Vue.set(target,index, value)

javascript 复制代码
// 部分代码
export default {
    data() {
        return {
            info: {
                username: 'alan'
            }
        }
    },
    mounted() {
        this.updateInfo()
    },
    methods: {
        updateInfo() {
            Vue.set(this.info, 'age', 18)
            console.log(this.info)
        }
    }
}

2.使用Object.assign,给属性重新赋值

javascript 复制代码
// 部分代码
updateInfo() {
    this.info = Object.assign({}, this.info, {age: 18});
    console.log(this.info)
}
相关推荐
溪语流沙7 小时前
【Web全栈进阶】Nginx反向代理 + HTTPS:正式上线
前端·vue.js·python·nginx·https·fastapi
vivo互联网技术7 小时前
域名埋点零侵入实时校验实践:基于代理转发与规则驱动的工具设计
前端·测试·监控·代理·埋点
喵个咪7 小时前
GoWind ShortPlay 拆解:Flutter 沉浸式 Feed 的播放器工程——生命周期、手势状态机与游客降级
前端·flutter·架构
白日做梦Q7 小时前
Chrome商店访问不了,无法现在安装插件?利用Edge商店迁移扩展完整实操教程问题背景
前端·chrome·edge
漫步人生走在路上7 小时前
外贸SEO中的品牌词与产品词策略:大卖家和小卖家的不同打法
大数据·javascript·网络·数据库·人工智能·搜索引擎
涛涛ing7 小时前
2026年,你的前端终于不用再“算随机数”和“量高度”了
前端
用户298698530147 小时前
React 前端 Word 转图片:页面与元素级导出的工程实践
前端·javascript·react.js
重生六道7 小时前
B站视频时长统计:一段JS脚本搞定分P/合集总时长(附倍速计算)
开发语言·javascript·音视频
彭亚川Allen7 小时前
从零手搓 RAG 之分块策略
前端·后端·面试