首页 > 其他分享 >遇到一个bug,组件不更新内容

遇到一个bug,组件不更新内容

时间:2022-09-29 08:44:52浏览次数:58  
标签:test1 刷新 update 更新 移除 组件 true bug


解决办法

当v-if的值发生变化时,组件都会被重新渲染一遍。因此,利用v-if指令的特性,可以达到强制刷新组件的目的。

<template>
    <comp v-if="update"></comp>
    <button @click="reload()">刷新test1组件</button>
</template>
<script>
import comp from '@/views/comp.vue'
export default {
    name: 'test1',
    data() {
        return {
            update: true
        }
    },
    methods: {
        reload() {
            // 移除组件
            this.update = false
            // 在组件移除后,重新渲染组件
            // this.$nextTick可实现在DOM 状态更新后,执行传入的方法。
            this.$nextTick(() => {
                this.update = true
            })
        }
    }
}
</script>

借用this.forceUpdate()强制刷新,但经过个人尝试,感觉还是没有v-if用着有效,

标签:test1,刷新,update,更新,移除,组件,true,bug
From: https://www.cnblogs.com/xuelinomen/p/16740195.html

相关文章

  • 【element UI】el-cascader 组件使用过程踩坑记录
    前言项目中使用到el-cascader组件,记录下遇到的一些问题以及解决方法,方便后续回顾查看。样式问题我是使用按需引入的elementUI,当使用到el-cascader组件时,下拉框里......
  • vue动态组件tab切换
     先弄3个tab组件,再导入 可以使用<component:is="activetab">那个,也可以使用下面注释的那个,二选一    选择TabA       第二部分如何切换之......
  • react forEach 里面 异步更新 setState
    如题要是等数组处理好,再setState中间就会卡一段时间const[list,setList]=useState([]);letarr=[]for(constitemofsourceList){letdd=await......
  • Vue 组件间的通信方式
    前言在Vue组件库的开发过程中,组件之间的通信一直是一个重要的课题。虽然官方的Vuex状态管理方案可以很好的解决组件之间的通信问题,但是组件库内部对Vuex的使用往往比较繁重......
  • python中字典更新键(key)的方式
    字典中的键(key)是哈希类型,不可以直接修改,需要修改键值用以下方法.方法一:新增key其value为原key的value,删除原key及其对应的value demo1={'name':'小瓜',......
  • element的el-table表格自定义表头解决数据不更新问题
    解决方法element官网上el-table上使用插槽slot=“header”来实现自定义表头,在表头中使用el-select组件选择不同的状态,无法展示选择后的状态,或者其他需要动态更新表头数......
  • C++问题汇总——长期更新
    避免使用vector<bool>,尽量使用bitset或者deque<bool>因为vector<bool>不是容器,底层是bool值按bit存储STLlist容器数据结构上看是带空头的双向循环链表容器迭代......
  • 【debug】gdb
    首先要编译出带调试信息的程序,加个-g参数 gdb程序名进入gdb模式 ulimit-cunlimied设置core文件大小为没有限制 break文件名:行号设置断点(甚至可以设置......
  • 从岳父坠入电梯井新闻谈软件建模[202102更新]
    ​​重点文章:CTO也糊涂的常用术语:功能模块、业务架构、用户需求……[20210217更新]>>​​【写于2018/10/10,2021/2/23修订,之前发的时候没有设置原创,无法归类到专辑,因此添加一......
  • CTO也糊涂的常用术语:功能模块、业务架构、用户需求……[20210217更新]
    功能模块、业务架构、需求分析、用户需求、系统分析、功能设计、详细设计、文档、业务、技术……很多被随口使用的名词,其实是含糊甚至错误的。到底含糊在哪里,错误在哪里,不仅......