vue中v-if 不重新渲染组件的问题

自遇：
tab切换，使用v-if，v-else来对自定义组件进行渲染，渲染的两个组件是一样的，但是数据，样式不同；v-if是根据tab切换的下标判断

结果：
只会渲染第一个，另一个切换后不渲染

原因：
可能是Vue识别到的是相似组件（高度相似甚至相同），所以就不会更新元素

方案：
使用key对两个组件进行标识

<组件 v-if="" :key="唯一标识">
<组件 v-else :key="唯一标识">

vue中v-if 不重新渲染组件的问题相关推荐

vue中，应用mapbox地图——地图组件mapbox-gl和语言包@mapbox/mapbox-gl-language地图英文转中文 accesstokens-访问令牌移动端地图-leaflet
vue中,应用mapbox地图--地图组件mapbox-gl和语言包@mapbox/mapbox-gl-language用于将地图上的英文转中文 & accesstokens-访问令牌 &am ...
在Vue中异步加载数据渲染到Dom
在Vue中异步加载数据渲染到Dom 问题 <div v-for="o in resmessage" :key="o" class="text i ...
实例-Vue中使用右键菜单之@xunleivue-context-menu组件的使用
实例-Vue中使用右键菜单之@xunlei/vue-context-menu组件的使用 npm地址--https://www.npmjs.com/package/@xunlei/vue-context ...
vue中的v-model原理，与组件自定义v-model
VUE中的v-model可以实现双向绑定,但是原理是什么呢?往下看看吧根据官方文档的解释,v-model其实是一个语法糖,它会自动的在元素或者组件上面解析为 :value="" ...
「后端小伙伴来学前端了」Vue中利用全局事件总线实现组件之间通信
月亮啊月亮你能照见南边,也能照见北边照见她,你跟她说一声,就说我想她了. 前言前一篇文章写了 vue 中利用 Props 实现组件之间的通信,那种方式是最简单也是最基础的组件之间的通信方式.父组 ...
vue中如何优雅实现爷孙组件的数据通信($attrs/$listeners)
$attrs和 $listeners如何使用呢? $attrs是用来将数据从爷组件传递给孙组件的.(理解为之前的父传子) $listeners是用来从孙组件中触发爷组件中事件的.(理解为之前的子传父) ...
vue 中provide的用法_Vue多级组件provide/inject使用详解
这次给大家带来Vue多级组件provide/inject使用详解,Vue多级组件provide/inject使用的注意事项有哪些,下面就是实战案例,一起来看一下. provide / inject 是 ...
vue中el-dialog弹窗关闭，子组件控制父组件
1.父组件页面中的点击事件控制子组件的弹窗出现 2.子组件页面有个叉叉,点了之后关闭当前页面 <div class="databtn" @click="record ...
VUE中简单封装二次确认组件
如何快速封装简单二次确认组件? 一.首先在src文件夹内的components文件中创建一个secn-conf.vue 二 .在secn-conf.vue页面中将弹出层.提示消息等样式写好三 .在p ...
vue中.sync修饰符与自定义组件的v-model的使用
.sync修饰符有时我们需要父组件向子组件传值,并且子组件要修改父组件中的值是,我们一般会这样写 //父组件 <template>//子组件修改值父组件注册自定义事件传过来的参数通过 ...

vue中v-if 不重新渲染组件的问题

vue中v-if 不重新渲染组件的问题相关推荐

最新文章

热门文章