<template> tag with v-for render undefined #4564

Closed
shjyh opened this Issue Dec 26, 2016 · 7 comments

Projects

None yet

5 participants

@shjyh
shjyh commented Dec 26, 2016 edited

if i use a Array as a prop of custom component,
the template element with v-for directive just render undefined

<component :list="list"></component>
<template v-for="item of list">{{item.name}}</template> <!-- output undefined -->

it's strange.
only template element tag has this problem.

Vue.js version

2.1.7

Reproduction Link

simple demo here
https://github.com/shjyh/vue_error_demo/tree/master/2016-12-26

@posva
Member
posva commented Dec 26, 2016

The template tag is meant to wrap multiple elements like:

<template v-for="item in list">
   <span>{{ item.key }}</span>
  <span> {{ item.name }}</span>
</template>

In your case you should simply use <span v-for="item in list"></span> to wrap the text nodes

@posva posva closed this Dec 26, 2016
@shjyh
shjyh commented Dec 26, 2016

I know.
but the real scene in my code is more complex than this demo. I need to wrap multiple elements in a template tag, but the output is undefined.
and it works all right in v2.1.6.
it seems all v-for directive inside a template tag output undefined if there's child component with props bind before the tag.
like this:

<component :list="list"></component>
<template v-if="ready">
        <div v-for="item of items">{{item.name}}</div> <!--here undefined-->
        <!-- ...other -->
</template>

and is this the expected behavior?

@posva
Member
posva commented Dec 26, 2016 edited
@posva posva reopened this Dec 26, 2016
@shjyh
shjyh commented Dec 26, 2016

at least the template like:

<component :list="list"></component>
<template v-for="(item,index) of list2">
    <div>{{index}}</div>
    <div>{{item.name}}</div>
</template>

works wrong.

and sometimes the v-for directive inside a template tag also output undefined, and works ok if I modified some code. I really don't know how it happen;

@simplesmiler
Member

Does happen in 2.1.7: https://jsfiddle.net/14dtfh51/8/
Does not happen in 2.1.6: https://jsfiddle.net/14dtfh51/9/

@defcc
Member
defcc commented Dec 26, 2016

Seems an issue with normalize children. I'll try to make a patch.

@defcc defcc self-assigned this Dec 26, 2016
@yyx990803 yyx990803 closed this in #4572 Dec 26, 2016
@dankuck
dankuck commented Jan 6, 2017

I'm still seeing a similar problem when running against the latest code.

Example: https://dankuck.github.io/TiltMaker/buggy.html

References: https://cdn.rawgit.com/vuejs/vue/dev/dist/vue.js

Github: https://github.com/dankuck/TiltMaker

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment