vue前端更改完数据及时刷新展示

只提供样例代码和思路

1.通过再次请求数据刷新(推荐)

uploadBtn() {request({url:'/partyMember/update.dao',data:{id:1,partyMemberCount:this.partyMemberChange.partyMemberCount,peopleCount:this.partyMemberChange.peopleCount,}}).then(res => {if(res.data.code === 200){//请求成功后再次请求刷新数据request({url:'/partyMember/querydata.dao',method:'get',params:{id:1},}).then(res => {if(res.data.code === 200){this.partyMember.peopleCount = res.data.data.peopleCount;this.partyMember.partyMemberCount = res.data.data.partyMemberCount;}else {console.log('党员人数信息请求错误,数值显示为0')}}).catch(err => {console.log('网络或请求错误')})console.log('修改成功')}else {console.log('修改失败请重试')}}).catch(err => {console.log('网络或请求错误')}},

2.通过刷新组件刷新

这种方法本质上也是再次请求数据

(1)key刷新(最好用的)

提供思路//要刷新的组件
点击后组件刷新>//key改变,组件刷新data(){return{key:1}
}

当然如果key不在同一组件需要传参的话,可以吧key放入vux中,改变this.$store.state.key就行了

(2)$forceupdate刷新

        别用,超级难用.

(3)v-if刷新

提供思路//要刷新的组件
点击后组件刷新>//isShow改变两次来刷新组件data(){return{isShow:true}
},
methods:{change(){this.isShow = !this.isShowthis.isShow = !this.isShow}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！