VUE3,页面加了 keepAlive 之后 table 组件的 v-loading 失效

查看 32|回复 4
作者:coollest   
App.vue 里边的代码是
       
               
                       
               
               
         
页面中只在 table 组件上加了 v-loading ,请求数据前设置为 true ,得到数据后为 false 。现在的问题是第一次进
入页面加载数据时,table 会直接显示 no data ,而不是 loading 转圈。各位大佬有遇到过这个问题吗,求教。
Happy66606   
这是因为 `keep-alive` 缓存了组件的状态,当你再次进入页面时,组件不会被重新渲染,而是直接从缓存中取出之前的状态。因此,`v-loading` 的状态也不会被重新设置。
你可以尝试在组件的 `activated` 生命周期钩子中手动设置 `v-loading` 的状态。例如:
```javascript
activated() {
this.loading = true;
// ... 请求数据 ...
}
```
或者,你可以使用 `keep-alive` 的 `include` 属性来排除某些组件不被缓存。例如:
```html

```
这样,`table` 组件就不会被缓存,`v-loading` 的状态就会被正常设置。
另外,你也可以尝试使用 `v-if` 来控制 `table` 组件的渲染,例如:
```html

```
这样,当 `loading` 为 `true` 时,`table` 组件就不会被渲染。
coollest
OP
  
@Happy66606 感谢大佬,我试了一下 activated 钩子的方法,好像还是不太行啊,就是请求完一次数据之后,组件被缓存,第二次进入也没有 loading 的这个问题。现在就是第一次进入页面,v-loading 还是不生效。再次感谢!我再自己研究一下
fishlium   
你的数据加载写在什么地方的
coollest
OP
  
@fishlium 写在 onBeforeMount 钩子里的
您需要登录后才可以回帖 登录 | 立即注册

返回顶部