vue created里新添加的属性，视图不会更新

Question

li元素的marginTop没有变化，而如果改变的是name，li元素一直变化，为什么noticeDatad在created里新添加的属性无效呢？<ul v-for="(item,index) in noticeData">    <li :style="{marginTop: item.marginTop + 'px'}">{{ item.name }}</li></ul> new Vue({    el: '#app',    data: {        noticeData: [{            id: 1,            name: '国庆大促销！全场5折'        }, {            id: 2,            name: '国庆大促销！全场8折'        }, {            id: 3,            name:' 国庆大促销！全场20折'        }],    },    created: function() {        var self = this;        self.noticeData.forEach(function(item){            item.marginTop = 0;        });        self.$nextTick(function(){            var i = 0;            setInterval(function(){                i += 2;                self.noticeData[0].marginTop = -i;                //self.noticeData[0].name= -i;            },1000);        });    }})

Answer 1

是因为这段代码的问题

self.noticeData.forEach(function(item){
            item.marginTop = 0;
});

换成这样既可

self.noticeData.forEach(function(item, index){    self.$set(self.noticeData[index], 'marginTop', 0);
});

具体可以看链接