<template> tag with v-for render undefined

[shjyh]

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]

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

[shjyh]

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]

It's very weird, indeed. I'll give it a deeper look this afternoon.

…

On Mon, 26 Dec 2016, 13:53 wangkehan, ***@***.***> wrote: 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? — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#4564 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAoicXh9NnnMTZ8k99ilMF0K4HF7zuArks5rL7iygaJpZM4LVoQP> .

[shjyh]

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]

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

[defcc]

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

[dankuck]

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