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

在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:{
        
    }
});
发布了22 篇原创文章 · 获赞 1 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_42618289/article/details/103871705