【笔记】vue的set方法更新一个新字段/新数组

最新推荐文章于 2024-04-14 11:30:00 发布

Mover_ye

最新推荐文章于 2024-04-14 11:30:00 发布

阅读量3.3k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_42618289/article/details/103871705

本文介绍在Vue实例中如何通过Vue.set方法来更新data对象内未初始化的新字段或新数组，确保变化能被响应式系统捕获并更新到页面。文章通过示例演示了正确的使用方式。

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

在vue实例里面，更新一个data对象里面没有初始化过的新字段/新数组，如果只是类似对象赋值的写法，是不会被重新挂载到页面实例中的，此时就要用到vue的set方法

更新字段格式：Vue.set(target_position, newKey, newValue);

更新数组格式：Vue.set(target_position, index, newValue);

写个小例子在下方：

var vm = new Vue({
    el: "#vm",
    data: function () {
        return{
            initObj:{
              name:"xiaoming",
              sex:"male",
              hobby:[] 
            }
        }
    },
    mounted:function(){
        $.ajax({
            url:"www.baidu.com",
            method:"GET",
            dataType:"json",
            cache:false,
            success:function(res){
                if(res.code == 200 && res.data){
                    //this.initObj.age = res.data.age;//错误；这样是没法更新到页面中的
                    Vue.set(this.initObj, "age", res.data.age);//正确
                    Vue.set(this.initObj.hobby, 0, res.data.hobby[0]);
                }
            }
        })
    },
    methods:{
        
    }
});