vue 修改对象属性 没有渲染页面_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())