vue修改对象属性页面不渲染解决方法

页面的list是根据后台接口返回数据组装而成，但是当页面更新list属性时，页面并未同时渲染成新的值，

先参考了用this.$set来修改属性，但还是不行，后面就加了this.$forceUpdate()强制更新，解决问题。

代码里面的关键点注意一下就行了。

vue修改对象属性页面不渲染解决方法：

import {mapState} from 'vuex'

import PageLoading from "../common/page-loading"

export default {

    name: "message",

    components: {PageLoading},

    data(){

        return {

            pageLoading: true,

            params: {

                zoneCode: this.configHelper.itcZoneCode,

                currentTime: parseInt((new Date()).getTime() / 1000),

                page: 1,

                defaultPageSize: 10

            },

            list: {},

            hasRead: false

        }

    },

    created() {

        window.scroll(0, 0)

        this.pageChange(1)

    },

    computed: {

        ...mapState({

            resultState: state => state.message.resultState,

            resultMsg: state => state.message.resultMsg,

            result: state => state.message.result,

            messageState: state => state.message.messageState,

            messageMsg: state => state.message.messageMsg,

        })

    },

    methods: {

        changeResultState(){

            if (this.resultState == 'success') {

                if (this.result.list.length > 0) {

                    var that = this;

                    this.result.list.forEach(function (item) {

                        that.list['id_'+item.kid] = item.receive_status

                        if (!that.hasRead && item.receive_status == '0'){

                            that.hasRead = true

                        }

                    })

                }

                this.pageLoading = false

            }else if (this.resultState == 'failure') {

                this.$layer.msg(this.resultMsg)

            }else if (this.resultState == 'neterror') {

                this.$layer.msg('网络错误')

            }else{

                //

            }

        },

        changeMessageState(){

            if (this.messageState == 'success') {

                //

            }else if (this.messageState == 'failure') {

                this.$layer.msg(this.messageMsg)

            }else if (this.messageState == 'neterror') {

                this.$layer.msg('网络错误')

            }else{

                //

            }

        },

        //分页

        pageChange: function(p) {

            this.pageLoading = true

            this.params.page = p

            this.$store.dispatch('GET_MESSAGE_LIST', this.params)

        },

        readAll(e) {

            var dataset = e.currentTarget.dataset

            //TODO 页面状态更新不是100%成功

            if (dataset.id == 'all') {

                for (var i in this.list) {

                    if (this.list[i] == '0') {

                        this.$set(this.list, i, '1') //关键点

                    }

                }

                this.hasRead = false

            }else {

                this.$set(this.list, 'id_'+dataset.id, '1')//关键点

                for (var i in this.list) {

                    if (this.list[i] == '0') {

                        this.hasRead = true

                    }

                }

            }

            //强制更新页面

            this.$forceUpdate()  //关键点

            this.$store.dispatch("READ_MESSAGE", {zoneCode: this.params.zoneCode, id: dataset.id})

        }

    },

    watch: {

        'resultState': 'changeResultState',

        'messageState': 'changeMessageState'

    }

}

vue,data,页面渲染,vue动态更新,vue对象

vue修改对象属性页面不渲染解决方法

$forceUpdate()强制重新渲染页面

Vue-给对象新增属性（使用Vue.$set()）