Vuejs v-for 将数据父级传递给子级 [英] Vuejs v-for Passing data Parent to Child

查看：22
本文介绍了Vuejs v-for 将数据父级传递给子级的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

这里是 html... 

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

这是模板.

这是 Javascript

var panel = Vue.extend({模板:document.querySelector('#item-template'),数据:函数(){返回 {显示:假}},方法: {切换:函数(){这个.show =！这个.show}}});var vm = new Vue({el:"#app-layout",数据:{数据:{项目:[{name:"Jonh"},{姓名:简"}，{名称:杰夫"}],},成分: {面板":面板}});

你可以在这里签到

<!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"><头><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>文档</title><body id="app-layout"><div class="容器"><div class="panel-group"><panel v-for="item in items" :item="item" :index="$index"></panel>

<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 class="panel-body" v-if="show">Content</div>

<脚本>var 面板 = Vue.extend({模板:document.querySelector('#item-template'),数据:函数(){返回 {显示:假}},方法: {切换:函数(){这个.show =！这个.show}}});var vm = new Vue({el:"#app-layout",数据:{项目:[{name:"Jonh"},{姓名:简"}，{名称:杰夫"}]},成分: {面板":面板}});</html>

解决方案

您忘记添加 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"><头><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>文档</title><body id="app-layout"><div class="容器"><div class="panel-group"><panel v-for="item in items" :item="item" :index="$index"></panel>

<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 class="panel-body" v-if="show">Content</div>

<脚本>var 面板 = Vue.extend({模板:document.querySelector('#item-template'),数据:函数(){返回 {显示:假}},道具: {项目:对象},方法: {切换:函数(){这个.show =！这个.show}}});var vm = new Vue({el:"#app-layout",数据:{项目:[{name:"Jonh"},{姓名:简"}，{名称:杰夫"}]},成分: {面板":面板}});</html>

I don't know why this is not work. I just want to make Bootsrap Collapse with Vuejs... I cannot get item data in child component... Any help will be appreciated.

Here is html... 

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

This is template.

<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>

And this is 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
            }
        });

You can check in here 

<!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>

解决方案

You forgot to add the 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>

这篇关于Vuejs v-for 将数据父级传递给子级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆