Vue: <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, [e-mail] 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:

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
https://github.com/vuejs/vue/issues/4564#issuecomment-269208861, 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 [email protected] is similar to the one reported in this issue, but in fact it is a regression that has already been fixed in [email protected]. Just update to the latest patch release, which is [email protected] at the moment.

Issue: https://github.com/vuejs/vue/issues/6790

Commit: https://github.com/vuejs/vue/commit/1f84dd1c2488d12ef144d4b548b0e80647f9403c

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.