search

vuejs / vue

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core
http://v2.vuejs.org
MIT License
207.89k stars 33.69k forks source link

v-if and v-else not working on a table with dynamically created td #3106

Closed Revassin closed 8 years ago

Revassin commented 8 years ago

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 commented 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/

yyx990803 commented 8 years ago

Thanks @prog-rajkamal for the explanation.

SAGV commented 7 years ago

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

prog-rajkamal commented 7 years ago

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