Question

我不知道为什么这不起作用。我只是想让Bootsrap与Vuejs一起崩溃......我无法在子组件中获取项目数据......任何帮助都将受到赞赏。

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

Answer 1

您忘记添加prop

＆＃13;

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

＆＃13;

Vuejs v-for将父数据传递给子

1 个答案: