search

vuejs / Discussion

Vue.js discussion
167 stars 17 forks source link

v-show can't be used in v-repeat #164

Open ybbjegj opened 9 years ago

ybbjegj commented 9 years ago

In the latest version of the vue.js, the use of v-repeat in the v-show, the v-show will appear abnormal information。 For example:

<div v-repeat='require:requireList' class='require-item' data-pgId='{{require.pgId || require.pgid}}' v-show='require.remain'>

Now tip the following error “Error when evaluating expression "require.remain": TypeError: Cannot read property 'remain' of undefined”。

OEvgeny commented 9 years ago

Works for me http://jsfiddle.net/hLd4xvpf/1/ vue-0.12-beta3. Also works with 0.11.10 http://jsfiddle.net/hLd4xvpf/3/ Do you use component instead of div? Like:

<my-component v-repeat='require:requireList' class='require-item' data-pgId='{{require.pgId || require.pgid}}' v-show='require.remain'></my-component>
ybbjegj commented 9 years ago

Thank you very much, but this code is used in a component.

I use the Vue version of 0.11.10

yyx990803 commented 9 years ago

Please read this post: http://vuejs.org/2014/12/08/011-component/

When you are using a component, you lose the automagic "shared scope" of plain v-repeat. Directives on the component root node are compiled in parent scope only. You need to move the v-show into the component's own template and use replace:true.