Element: [Bug Report] v-loading keeps loading forever when the value is changed from `true` to `false` in the same microtask.

[Clarence-pan]

Element UI version

1.3.2

OS/Browsers version

Windows 10, Chrome 58.0.3029.96 (64-bit)

Vue version

2.3.3

Reproduction Link

http://jsfiddle.net/p47u32qy/

Steps to reproduce

Click "Flash loading (0)" button will make it reproduce. Here is a recorded gif:

点击"Flash loading(0)"就可以重现。这里有个我录制的gif:

What is Expected?

When at last the v-loading is false, no loading animations should be shown.

最终v-loading为false的时候，应该没有loading动画。

What is actually happening?

When at last the v-loading is false, however, a loading animations is shown and never stops.

最终v-loading为false的时候，却有loading动画，而且永不停止。

[element-bot]

Translation of this issue:

Element UI version

1.3.2

OS/Browsers version

Windows 10, Chrome, 58.0.3029.96 (64-bit)

Vue version

2.3.3

Reproduction Link

http://jsfiddle.net/p47u32qy/

Steps to reproduce

Click "Flash loading (0)" button will make it reproduce. Here is gif: a recorded

Click Flash loading (0) to reproduce. Here's a gif: I recorded
(http://ww1.sinaimg.cn/large/bf5f3c73gy1ffinkjsk9dg20ew0d3djc.gif) []!

What is Expected?

When, at, last, the, is, false, v-loading, no, loading, animations, should, be, shown.

When v-loading is false at last, there should be no loading animation.

What is actually happening?

When, at, last, the, is, v-loading, false, however, a, loading, animations, is,, shown, and, never, stops.
When v-loading is false at last, it has loading animation, and never stops.

[Leopoldthecoder]

It's recommended to wrap loading.close() in this.$nextTick.

[Clarence-pan]

@Leopoldthecoder what does loading mean in "It's recommended to wrap loading.close() in this.$nextTick." ? Is it a component or an instance of what?

Actually, I've found this issue in a much more complexed situation. The code in http://jsfiddle.net/p47u32qy/ is a simplified one. In the real world, the v-loading status is determined by serveral API requests' status. It happened when all the API requests are cached. It is impossible to manually hard code when to call loading.close() or v-loading=false.

p.s. I think this is a remarkable issue which should be resolved. Please do NOT hurry to close it. I will also try to figure out the solution via dive into your source codes. (Though I have already found another way to bypass it)

----- 我觉得可能中文描述得更清楚些：

首先，请问你说的loading.close() 里面的 loading 是指什么？是一个组件还是某个东东的实例？

其次，实际上，我是在一个相当复杂的场景中遇到这个问题的。那个jsfiddle上的代码只是一个极其简化版。
事实上，我遇到的问题场景中，v-loading的状态是有好几个API请求的状态共同决定的。这个问题是在当所有的API请求刚好都是从缓存中读取的时候才暴露出来的。 这种场景下，根本没法直接硬编码一个loading.close()或者v-loading=false.

p.s. 我觉得这个问题应该还是需要解决的，请不要急着关闭这个问题。我有空的时候也会来研究下你们这个组件的代码，看看有没有办法解决这个问题。(尽管我想方设法已经绕过这个bug)

[Leopoldthecoder]

It happened when all the API requests are cached

That's exactly where you should close loading in the next tick. loading.close() refers to whatever way you close loading. In your demo, it is this.loading = false.

[Clarence-pan]

@Leopoldthecoder. Well. What you said is almost exactly what I'd done in my bypass way -- except that the loading status is a computed field. I have had to write lots of codes to make it became false in next tick. It's a quite dirty and rough way solution.

My opinion will be reserved that it is not the best way to resolve this issue. There should be a more elegant solution.

Thank you anyway.

[shihua-guo]

The same problem.
I bind the v-loading with the data attribute (default value is true), but when I change this value to false, the loading modal is still exist though v-loading is already turn to false

[taoliujun]

same problem just for IE11
I resolve it by nextTick, and i guess that loading is changed but not render at time. a strange appearance is that this.datas become empty
some code
this.loading = true; this.$nextTick(()=>{ getDatas().then(()=>{ this.loading = false; this.datas = []; }); });

[taoliujun]

please mail to me if you resolve it, thk u. mail is [email protected]

[jpcaparas]

This is also an issue on IE11 on Windows 7.

We have a self-contained <div /> element that uses v-loading.

Once we toggle the value of v-loading to false, then true, then false again the animation stops, but the overlay "jumps out" of it's parent and covers the entire screen.