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){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item.marginTop&nbsp;=&nbsp;0; });换成这样既可self.noticeData.forEach(function(item,&nbsp;index){&nbsp;&nbsp;&nbsp;&nbsp;self.$set(self.noticeData[index],&nbsp;'marginTop',&nbsp;0); });具体可以看链接