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

最新推荐文章于 2025-04-29 21:15:49 发布

原创最新推荐文章于 2025-04-29 21:15:49 发布 · 6.6k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #html

本文介绍了两种在前端更新数据的方法：一是通过再次请求数据实现页面信息的刷新，二是利用组件的key属性或者$forceUpdate方法达到刷新效果。详细阐述了各自的实现思路，并提供了代码示例，对于理解和优化前端数据更新流程具有指导意义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

只提供样例代码和思路

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刷新(最好用的)

提供思路

<component :key="key"></component>//要刷新的组件
<button @click="key+1">点击后组件刷新</button>>//key改变,组件刷新


data(){
    return{
        key:1
    }
}

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

(2)$forceupdate刷新

别用,超级难用.

(3)v-if刷新

提供思路

<component v-if="isShow" :key="key"></component>//要刷新的组件
<button @click="change">点击后组件刷新</button>>//isShow改变两次来刷新组件


data(){
    return{
        isShow:true
    }
},
methods:{
    change(){
        this.isShow = !this.isShow
        this.isShow = !this.isShow
    }
}