-
-
Notifications
You must be signed in to change notification settings - Fork 33.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
<component v-for> problem #2424
Comments
Hi fenivana, I've looked at the code in the reproduction link, i see what you mean about the error which is displayed in the console. I copied the code and set it up exactly on my system and it rendered the component without errors. Furthermore, if you examine the console output, you'll notice that the log messages for 'created' and 'check' are repeated before the error is thrown. On my system, no such thing happens... it simply creates the component and logs the messages in sequence as expected i.e. 'created' followed by 'check'. My thoughts are that to understand what's really happening we need to deconstruct your code. Taking it from the top..
What exactly are you trying to achieve with this template? What i can see is that..
With the preceding analysis, i can say that what is happening is the following:
Wheeeew... I may be wrong in my analysis, but the preceding is what i think is causing the error to be thrown. And maybe because of the nature of 'jsfiddle' the 'issues' with the code are not ignored. FYI my attempt to replicate the issue on my system is..: By the way, what exactly are you trying to achieve? Are you trying to dynamicayy generate a set of 'divs' when the button is clicked? I hope my attempt to explain what's happening is helpful. Regards. |
@fenivana In my opinion, the error was caused by infinite loop. 1) how the infinite loop ends up with that error? i have no idea. |
Ahhh... i see. Great then. May i ask why you're using 'v-for' with the 'component' tag? My understanding is that it shoudn't work. I'd appreciate some insight. Regards. |
There is definitely a bug somewhere. Somehow during |
From
During initialization, [2] asynchronously recursively calls
After button is pressed, [2] synchronously recursively calls
|
@simplesmiler, @yyx990803 I'd really appreciate an explanation. Regards. |
@oakinogundeji |
@yyx990803 would not the solution just be the following? //var frags = this.frags = new Array(data.length)
var frags = new Array(data.length) // after all fragments are set
this.frags = frags |
This is actually an async queue scheduling issue - the change was triggered from a watcher, which leads to it being applied synchronously before the diff finishes - basically, triggering a new diff in the middle of an ongoing diff, thus messing up all the intermediate state. |
As a side note, I'd like to point out that mutating object props is not recommended practice... |
@yyx990803 I see. I'm still learning how Vue internals are supposed to work. |
@yyx990803 I know this issue has been resolved but i have a few questions i'd like clarification on.
My problem isn't with the 'v-for' or ':is' directives in themselves, rather my problem is usage of these directives with the 'component' tag. According to the contents of the docs, the 'component' tag is reserved for use a s a mount point to dynamically switch between multiple components which are bound to the ':is' attribute of the parent vm. I would like clarification on this issue since i believe that a tool as popular as Vue shouldn't throw these kind of surprises based on the docs. Besides, while i'm relatively new to Vue.js, it is my tool of choice for building client side apps and i promote it in my writings (https://medium.com/@nohkachi).
Regards, PS |
@oakinogundeji you're right - this should be in the docs. The phrasing in the current doc about <custom-component v-for="item in items"></custom-component> Which means you can do this too: <component v-for="item in items" :is="item.type"></component> |
@yyx990803 Thanks Evan, i appreciate the clarification. If i understand you correctly, you are saying that while the 'component' tag has a primary function of serving as a mount point for dynamically rendering child components, we could also use it to generate a 'list' of components just as we would use the 'v-for' directive on any HTML element. I'd appreciate if you clarified the significance of ':is="item.type" ', what exactly does the '.type' property signify? Are we supposed to assign the elements in the list a 'type' property? Thanks for the response i appreciate. Regards. |
@simplesmiler Regards. |
@oakinogundeji probably easier to understand with a demo: https://jsfiddle.net/9c4nwt9a/ If you are interested in Vue internals, you can enable |
@yyx990803 Thanks man, really appreciate all your help. Yes i am interested in Vue internals and everything Vue. I really appreciate what you've done with it. May i submit my material for your review? It may be helpful for other beginners like me :-) Regards. |
@oakinogundeji as Evan said, it was Chrome DevTools, Vue source code and some guesswork. |
@simplesmiler Thanks man. Regards. |
@yyx990803 我使用 |
Vue.js version
1.0.17
Reproduction Link
https://jsfiddle.net/fenivana/7jcoogfc/
Steps to reproduce
Click the button in jsfiddle demo
What is Expected?
The component rendered without error.
What is actually happening?
Uncaught TypeError: Cannot read property 'reused' of undefined (vue.js:4116)
The text was updated successfully, but these errors were encountered: