vue v-for初始化后，数组更新但视图没更新的处理

最新推荐文章于 2023-12-22 17:10:17 发布

Qaye

最新推荐文章于 2023-12-22 17:10:17 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue前端文章标签： vue 视图更新动态监测

本文链接：https://blog.youkuaiyun.com/fanrenmuchangqian/article/details/79910612

vue前端专栏收录该内容

6 篇文章

订阅专栏

当Vue使用v-for初始化数组视图后，如果数组发生更改，视图可能不会自动更新。官方文档建议通过特定方式设置数据以触发视图刷新。在特定场景下，如根据数组长度定义滚动宽度，并需要更新滚动条，可以采用set方法确保视图同步。详情可参考作者的上一篇博客：https://blog.youkuaiyun.com/fanrenmuchangqian/article/details/79658743。

vue中依赖数组视图初始化后，后续数组更改，但是视图不更新，根据官网解释：

1）源代码如下：

 
  <
  div 
  class=
  "tab" 
  ref=
  "tab"
  >
 
 
  <
  div 
  class=
  "tab_content" 
  ref=
  "tabcontent" 
  >
 
 
  <
  game_block 
  class=
  "tab_item" 
  v-for="(
  item, 
  index) 
  in 
  lastPlayGameInfo" 
  ref=
  "tabitem" 
  :gameinfo = 
  'item'
  ></
  game_block 
  > 
 
 
  </
  div
  >
 
 
  </
  div
  >
 

2）监测数据变化，如果变化则set下，因为我是根据数组长度定义横向scroll的宽度，所以后来还refresh scroll宽度，具体的横向scroll的见我上一篇博客： https://blog.youkuaiyun.com/fanrenmuchangqian/article/details/79658743

 
  watch: {
 
  lastPlayGameInfo(
  lastPlayGameInfo){
 
  console.
  log(
  1234);
 
  this.
  lastGameInfo = [];
 
  this.
  lastPlayGameInfo.
  forEach((
  value,
  index) 
  => {
 
  this.
  $set(
  this.
  lastGameInfo,
  index,
  value);
 
   });
 
  this.
  InitTabScroll();
 
   }
 
   },