Vuejs v-for 将数据从父级传递给子级答案

【问题标题】：Vuejs v-for Passing data Parent to ChildVuejs v-for 将数据从父级传递给子级
【发布时间】：2016-11-14 20:48:26
【问题描述】：

我不知道为什么这不起作用。我只想用 Vuejs 制作 Bootsrap Collapse...我无法在子组件中获取项目数据...任何帮助将不胜感激。

这里是html...

<div class="panel-group">
     <panel v-for="item in items" :item="item"></panel>
</div>

这是模板。

<script id="item-template" type="x-template">
  <div>
     <div class="panel panel-default">
        <div class="panel-heading"><a v-on:click="toggle(show)">{{item.name}}</a></div>
     </div>
     <div class="panel-body" v-if="show">Content</div>
  </div>
</script>

这是Javascript

var panel = Vue.extend({
            template: document.querySelector('#item-template'),
            data: function() {
                return {
                    show: false
                }
            },
            methods: {
                toggle: function() {
                    this.show = ! this.show
                }
            }
        });

var vm = new Vue({
            el:"#app-layout",
            data:{
        data:{
            items:[
                {name:"Jonh"},
                {name:"Jane"},
                {name:"Jeff"}
               ],
            },
            components: {
                "panel": panel
            }
        });

你可以在这里签到

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
	<title>Document</title>
</head>
<body id="app-layout">
	<div class="container">
		<div class="panel-group">
			<panel v-for="item in items" :item="item" :index="$index"></panel>
		</div>
		<script id="item-template" type="x-template">
		<div>
			<div class="panel panel-default">
				<div class="panel-heading"><a v-on:click="toggle(show)">it doesn't get parent item</a> {{item.name}}</div>
			</div>
			<div class="panel-body" v-if="show">Content</div>
		</div>
		</script>
	</div>
	<script>
		var panel = Vue.extend({
	            template: document.querySelector('#item-template'),
	            data: function() {
	                return {
	                    show: false
	                }
	            },
	            methods: {
	                toggle: function() {
	                    this.show = ! this.show
	                }
	            }
	        });
		var vm = new Vue({
            el:"#app-layout",
            data:{
                items:[
                    {name:"Jonh"},
                    {name:"Jane"},
                    {name:"Jeff"}
                ]
            },
            components: {
                "panel": panel
            }
        });
	</script>
</body>
</html>

【问题讨论】：

toggle(show)的目的是什么，你为什么要通过show？这是未定义的。
请让我更新一下
我更新了。 toggle(show) 正在隐藏和显示 Content 元素，它是
Content
...它工作正常。但我无法将项目数据传递给面板组件。

标签： vue.js

【解决方案1】：

您忘记添加prop

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
	<title>Document</title>
</head>
<body id="app-layout">
	<div class="container">
		<div class="panel-group">
			<panel v-for="item in items" :item="item" :index="$index"></panel>
		</div>
		<script id="item-template" type="x-template">
		<div>
			<div class="panel panel-default">
				<div class="panel-heading"><a v-on:click="toggle(show)"></a> {{item.name}}</div>
			</div>
			<div class="panel-body" v-if="show">Content</div>
		</div>
		</script>
	</div>
	<script>
		var panel = Vue.extend({
	            template: document.querySelector('#item-template'),
	            data: function() {
	                return {
	                    show: false
	                }
	            },
                props: {
                  item: Object
                },
	            methods: {
	                toggle: function() {
	                    this.show = ! this.show
	                }
	            }
	        });
		var vm = new Vue({
            el:"#app-layout",
            data:{
                items:[
                    {name:"Jonh"},
                    {name:"Jane"},
                    {name:"Jeff"}
                ]
            },
            components: {
                "panel": panel
            }
        });
	</script>
</body>
</html>

【讨论】：