vue 强制组件重新渲染(重置)的两种方案
数据通过异步操作后,对之前刚加载的数据进行变更后,发现数据不能生效
方案一
当数据变更后,通过watch 监听,先去销毁当前的组件,然后再重现渲染。使用 v-if 可以解决这个问题
<template> <third-comp v-if="reFresh"/> </template> <script> export default{ data(){ return { reFresh:true, menuTree:[] } }, watch:{ menuTree(){ this.reFresh= false this.$nextTick(()=>{ this.reFresh = true }) } } } </script>
这种方式虽然可以实现,太不优雅
方案二
通过vue key 实现,原理官方文档。所以当key 值变更时,会自动的重新渲染。
<template> <third-comp :key="menuKey"/> </template> <script> export default{ data(){ return { menuKey:1 } }, watch:{ menuTree(){ ++this.menuKey } } } </script>
以上这篇vue 强制组件重新渲染(重置)的两种方案就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
vue强制刷新组件的方法示例
前言: 在开发过程中,有时候会遇到这么一种情况,通过动态的赋值,但是dom没有及时更新,能够获取到动态赋的值,但是无法获取到双向绑定的dom节点,这就需要我们手动进行强制刷新组件. 官网是这样说的: 可能你还不大理解,请继续往下看,下面是我的一个例子,来详细解说了这个方法的使用, 第一个打印结果 第二个打印结果 一.问题描述:父组件通过v-for渲染子组件,删除子组件数据出现异常. <code class="language-plain"><section v-if=
-
vue修改对象的属性值后页面不重新渲染的实例
最近项目在使用vue,遇到几次修改了对象的属性后,页面并不重新渲染,场景如下: HTML页面如下: <template v-for="item in tableData"> <div :class="{'redBorder':item.red}"> <div>{{ item.name}}</div> <div> <el-button size="mini" @click="
-
Vue 创建组件的两种方法小结(必看)
创建组件的两种方法小结 1.全局注册 2.局部注册 var child=Vue.extend({}) var parent=Vue.extend({}) Vue.extend() 全局方法 生成构造器,创建子类 使用基础 Vue 构造器,创建一个"子类". 这样写非常繁琐.于是vue进行了简化 使用Vue.component()直接创建和注册组件: Vue.component(id,options) 全局方法 用来注册全局组件 id 是string类型,即是注册组件的名称 option
-
vue 强制组件重新渲染(重置)的两种方案
数据通过异步操作后,对之前刚加载的数据进行变更后,发现数据不能生效 方案一 当数据变更后,通过watch 监听,先去销毁当前的组件,然后再重现渲染.使用 v-if 可以解决这个问题 <template> <third-comp v-if="reFresh"/> </template> <script> export default{ data(){ return { reFresh:true, menuTree:[] } }, watch
-
Vue强制组件重新渲染的方法讨论
有时候,依赖 Vue 响应方式来更新数据是不够的,相反,我们需要手动重新渲染组件来更新数据.或者,我们可能只想抛开当前的DOM,重新开始.那么,如何让Vue以正确的方式重新呈现组件呢? 强制 Vue 重新渲染组件的最佳方法是在组件上设置:key. 当我们需要重新渲染组件时,只需更 key 的值,Vue 就会重新渲染组件. 这是一个非常简单的解决方案. 当然,你可能会对其他方式会更感兴趣: 简单粗暴的方式:重新加载整个页面 不妥的方式:使用 v-if 较好的方法:使用Vue的内置forceUpda
-
Vue中强制组件重新渲染的正确方法
有时候,依赖 vue 响应方式来更新数据是不够的,相反,我们需要手动重新渲染组件来更新数据.或者,我们可能只想抛开当前的DOM,重新开始.那么,如何让vue以正确的方式重新呈现组件呢? 强制 Vue 重新渲染组件的最佳方法是在组件上设置:key. 当我们需要重新渲染组件时,只需更 key 的值,Vue 就会重新渲染组件. 这是一个非常简单的解决方案. 当然,你可能会对其他方式会更感兴趣: 简单粗暴的方式:重新加载整个页面 不妥的方式:使用 v-if 较好的方法:使用Vue的内置forceUpda
-
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
一.路由拦截 登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录页面. const routes = [ { path: '/', name: '/', component: Index }, { path: '/repository', name: 'repository', meta: { requireAuth: true, // 添加该字段,表示进入这个
-
详解vue父子组件关于模态框状态的绑定方案
日常开发中经常遇到的一个场景,父组件有很多操作,需要弹窗,例如: <template> <div class="page-xxx"> //点击打开新增弹窗 <button>新增</button> //点击打开编辑弹窗 <button>编辑</button> //点击打开详情弹窗 <button>详情</button> <Add :showAdd="false">
-
AngularJS监听ng-repeat渲染完成的两种方法
本文实例讲述了AngularJS监听ng-repeat渲染完成的两种方法.分享给大家供大家参考,具体如下: 监听ng-repeat渲染完成有两种方法 一.最实用的方法: <ul class="pprt_content"> <li ng-repeat="src in imageHotList track by $index" ng-click='goGoodsDet(src.goodsId,src.merchId)' on-finish-render
-
vue打包上传服务器刷新404问题的两种方案
一:nginx服务器解决方案,修改 .conf 配置文件 有两种解决方案 1: location / { try_files $uri $uri/ @router; index index.html; } location @router { rewrite ^.*$ /index.html last; } 2: location / { error_page 404 /index.html; #try_file $uri $uri/ /index.html =404; } 二:apach
-
使用vue打包时gzip压缩的两种方案
目录 介绍两种gzip压缩的方式 webpack打包生成gz文件 服务器在线gzip压缩 vue项目开启gzip压缩 前端配置 后端配置 开局一张图: 可以看出,在项目部署后,我们的资源文件请求都会保持原本大小,如果文件过大,并且很多的情况下,会导致网络请求耗时,严重点可能阻塞后面的进程. 介绍两种gzip压缩的方式 1.打包的时候通过webpack配置生成对应的 .gz 文件,浏览器请求xx.js/css等文件时,服务器返回对应的xxx.js.gz文件: 2.浏览器请求xx.js文件时,服务器
-
Vue项目实现换肤功能的一种方案分析
需求:网站换肤,主题切换.网站的主题色可以在几种常用颜色之间进行切换,还有相关图片.图标也要跟随主题进行切换. 不多说,先看下最终的实现效果: 文章由两部分组成:css切换,图片图标切换 css切换 1.在 static 目录下新建一个 styles 文件夹,在 styles 下新建一个 theme.scss 文件(项目使用了sass,会自动编译成css文件,如果没有使用这些预处理工具可以直接新建 theme.css),将需要替换的 CSS 声明在此文件中. .theme-test-btn {
-
Android彻底清除APP数据的两种方案总结
目录 用途 方案一:利用命令行pm clear 包名,系统级别清除App数据 优点 缺点 代码 方案二:手动删除内部储存和外部储存 优点 缺点 代码 总结 用途 用于APP内部的重置功能实现. 方案一:利用命令行pm clear 包名,系统级别清除App数据 优点 和任务管理器里面清除所有数据的操作一致,会删除所有的APP数据.重新进入APP还需重新申请权限. 缺点 系统会直接杀掉APP进程,无法进行拉起APP的操作. 代码 public static Process clearAppUserD
随机推荐
- D3.js中强制异步文件读取同步的几种方法
- PostgreSQL教程(七):函数和操作符详解(3)
- 比较详细的关于javascript 解析json的代码
- Android TabWidget切换卡的实现应用
- Vue实现选择城市功能
- JavaScript实现的SHA-1加密算法完整实例
- Python自动化运维和部署项目工具Fabric使用实例
- C#函数式编程中的惰性求值详解
- python实现批量监控网站
- JavaScript简单验证表单空值及邮箱格式的方法
- 发现个AJAX图片浏览器SIMPLEVIEWER
- JS定时器用法分析【时钟与菜单中的应用】
- bootstrap实现弹窗和拖动效果
- JavaScript使用indexOf获得子字符串在字符串中位置的方法
- JavaScript Array Flatten 与递归使用介绍
- SpringBoot+Websocket实现一个简单的网页聊天功能代码
- Gridview自动排序功能的实现
- Java的Socket网络编程基础知识入门教程
- Android实现双模(CDMA/GSM)手机短信监听的方法
- c语言++放在前面和后面的区别分析