Closed Revassin closed 8 years ago
The problem is that v-for
is executed before v-if
.
This is by design and will not change.
For your case, try <template>
tag for v-if
https://jsfiddle.net/gbLhr7uy/5/
Thanks @prog-rajkamal for the explanation.
@prog-rajkamal I'm just curious, why was it decided to execute v-for
before v-if
? What is the reasoning behind?
@SAGV v-for adds extra params i.e. (item,index) in scope for other v-directives to use, hence it is executed first.
NOTE: you don't have to put v-for and v-if/v-show on same tag.
you can use <template>
to nest v-for and v-if/v-show as I have shown in the jsfiddle above.
Hi, I am a beginner with Vue/JS but this just didn't seem to work properly so I guessing it might be a bug?
So I created a table with predefined td like in this example https://jsfiddle.net/gbLhr7uy/ then everything works fine. Instead of taking the prop name with value vegeta it shows my v-if with Prince vegeta as text.
However the moment I dynamically try to create multiple td's by using a second v-for on the tag the v-else td seems to break. Although the td with the v-if statement works my td with the v-else doesn't display the data from my array anymore. See example https://jsfiddle.net/gbLhr7uy/2/
So is this a bug or I am doing stuff totally wrong? I googled and check the issues but couldn't fine any answer which is why i created this issue.
EDIT: I am using this version of vue https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.25/vue.js