<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

[buzdyk]

So, what's going on here.. Any updates?

[posva]

if there's a bug, please, open a new issue with the corresponding repro

[doydoydoy]

Any updates regarding this? I am getting the same error. My code is very similar to the first post.

[nirazul]

As many will stumble upon this issue:

The error introduced in vue@2.5.0 is similar to the one reported in this issue, but in fact it is a regression that has already been fixed in vue@2.5.1. Just update to the latest patch release, which is vue@2.5.2 at the moment.

Issue: #6790

Commit: 1f84dd1

Release: https://github.com/vuejs/vue/releases/tag/v2.5.2

[dankuck]

I finally solved my problem when I realized that I was loading a separate version of Vue on the page. Only the one webpacked into my distribution files was necessary.

[zikyfranky]

I was facing the same issue, and nothing on here solved it for me (using Vue3)

After lot of frustration, I discovered I caused the issue, as I was binding v-for, check your code, it should be v-for="" and not :v-for=""

I only had to remove the colon : and it works now.