开发技术学习

页面的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()）

参考链接：https://blog.csdn.net/jerryyang_2017/article/details/82467016