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

问题描述

问 题

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);
        });
    }
})

解决方案

是因为这段代码的问题

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

换成这样既可

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

具体可以看链接

这篇关于javascript - vue created里新添加的属性，视图不会更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！