<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
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
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?
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>
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;
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
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: #6790
Commit: 1f84dd1
Release: https://github.com/vuejs/vue/releases/tag/v2.5.2
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.
