[2.0.0-rc.2] when use v-for with v-if and v-else, it will render square of the expected number

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.71k stars 33.67k forks source link

[2.0.0-rc.2] when use v-for with v-if and v-else, it will render square of the expected number #3479

Closed baiyaaaaa closed 8 years ago

baiyaaaaa commented 8 years ago

Vue.js version

2.0.0-rc.2

Reproduction Link

https://jsfiddle.net/WhiteCusp/frfekkf5/3/

Steps to reproduce

just run

What is Expected?

0-aaaa 1-bbbb 2-cccc

What is actually happening?

0-aaaa 1-bbbb 2-cccc 0-aaaa 1-bbbb 2-cccc 0-aaaa 1-bbbb 2-cccc

prog-rajkamal commented 8 years ago

This looks like a bug to me. Workaround

Elfayer commented 8 years ago

+1 If we use v-if="customItem" instead of v-else it works fine. Looks like it comes from the v-else directive.

DEMO

LinusBorg commented 8 years ago

v-for followed by an element using v-else does not play nice together, because v-if relys on the previous sibling elements v-if result - but there can be more than one, as v-if is evaluated after v-for so evaluated for each item in the loop.

This can lead to unexpected behaviour.

posva commented 8 years ago

You can surround the element with a template and use the v-if/v-else there: https://jsfiddle.net/frfekkf5/7/