Vuejs v-for Passing data Parent to Child

Question

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>

What is the purpose of `toggle(show)` why are you passing show? Which is undefined. — gurghet, Jul 12 '16 at 14:35
I updated. toggle(show) is hiding and showing Content element which is
Content
... it works fine. But I couldn't pass item data to the panel component. — Oğuz Can Sertel, Jul 12 '16 at 14:50

score 1 · Accepted Answer · answered Jul 12 '16 at 15:08

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 Passing data Parent to Child

1 Answers1

Linked