vue slot的切换数据不刷新问题

业务

image.png

image.png

image.png

请仔细看slot代码部分对应效果图

问题

tab部分可能是多个模板间的切换,,也可能是同意模板之间的切换,看效果图,当前就是两个问卷模板和一个文档模板之间的切换

右侧的内容筛选进行刷选时会过滤下面的列表,随后点击tab,右侧内容为相应模板下的刷选项以及列表

问题就在于如果在行政区划中选中某些筛选条件,切换在1,再重1切换回行政区划之前的刷选项依旧存在,并且列表数据为刷选之后的数据,但是我在切换的过程中做了重置筛选项的操作,并且接口放回的为所有数据,这种问题只存在同模板之间切换会出现,,不同模板间切换不存在该问题

个人观点是slot切换导致的,,在vue-devtool中观测数据发现同模板间切换数据不会改变,,不同模板之间切换数据会改变

数据不更新不会是直接修改数组,对象的值情况导致的,值得修改一律使用的是$set

希望有大佬能给个解决方案(在使用slot的情况下),否则会出现大量代码的修改,感谢感谢

阅读 8k
2 个回答

两种方法
1.试试在slot加个key,内容一样vue就不会再次渲染,用id告诉它这并不是同一个template
2.定义一个组件内方法,是否重置数据,相同模板切换的时候调用

如果更新的数据是在内层时,就不能用index作为key,因为外层没有发生变化,vue更新机制会跳过

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题