Vuejs v-for 父子数据传递

Question

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

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

<!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 父子数据传递

Vuejs v-for Passing data Parent to Child

vue.js