vue中数据赋值后不渲染问题总结
vue中常会出现组件不会渲染更新的问题,常用的方法总结了一下1.用this.$forceUpdate()方法,改变值后直接调用就行例如:this.data.tabDefault = false;this.$forceUpdate();2.如果是object或者是array类型的话改变值最好用this.$set()、this.$delete(),array.splice()等方法...
·
vue中常会出现组件不会渲染更新的问题,常用的方法总结了一下
1.用this.$forceUpdate()方法,改变值时直接调用就行
例如:
this.$forceUpdate(); this.data.tabDefault = false;
2.如果是object或者是array类型的话改变值最好用this.$set()、this.$delete(),array.splice()等方法进行修改
this.$set(this.data,'tabDefault',false)
3.用v-if来控制组件让改变值后组件件消失后重新来渲染一次。
视图
<Input v-if="show" key="1" id="keyword" name="keyword" prefix="ios-search" placeholder="搜索"/>
js:
$this.show= false; this.data.tabDefault = false; $this.show= true;
4.着点不容易注意到,就是用v-if如果值改变成功了没有重新渲染的话很可能是组件太相似让vue没有识别出来,必须加个key来区分这些组件。
<Input v-if="tabDefault==='company'" key="1" id="keyword" name="keyword" prefix="ios-search" placeholder="搜索"/> <Input v-if="tabDefault==='role'" key="2" id="keyword2" name="keyword2" prefix="ios-search" placeholder="搜索"/> <Input v-if="tabDefault==='interior'" key="3" id="keyword3" name="keyword3" prefix="ios-search" placeholder="搜索"/>
5.将改变放大,如果层次太深那就连带上级一起更新,实在没办法也不怎么影响性能的时候可以这么干。
备注此文章为随笔记录分享文章,完全看懂需要一定的vue基础。
更多推荐
已为社区贡献1条内容
所有评论(0)