Vue: v-if and v-else not working on a table with dynamically created td

[Revassin]

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

[prog-rajkamal]

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/

[yyx990803]

Thanks @prog-rajkamal for the explanation.

[SAGV]

@prog-rajkamal I'm just curious, why was it decided to execute v-for before v-if? What is the reasoning behind?

[prog-rajkamal]

@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.