オブジェクトが定義されていないのはなぜですか？

Question

私はVue.js 2を試してみたいと簡単な例で始めました。私はここからこれを取ってhttps://jsfiddle.net/gmsa/gfg30Lgv/とそれと簡単なプロジェクトを作成しました。このコードをファイルに分割した後、プロジェクトは機能しません。

data: function(){ 
     return { 
      tabs: [{ 
       name: "tab1", 
       id : 0, 
       isActive: true 
      }], 
      activeTab: {} 

     }  
    }, 

しかし、エラーがコンソールにあります：だから私は、データプロパティ機能を作ったキャッチされないにReferenceError：NEWTABが定義されていません。

プロジェクト：https://github.com/rinatoptimus/vue-webpack-delete

ファイルQueryBrowserContainer：

<template> 
<div id="queryBrowserContainer"> 
    <p>queryBrowserContainer text</p> 
    <ul class="nav nav-tabs" role="tablist"> 
     <li role="presentation" v-for="tab in tabs" :class="{active:tab.isActive}"> 
      <a href="#" role="tab" data-toggle="tab" @click.stop.prevent="setActive(tab)">{{ tab.name }}</a> 
     </li> 
     <li> 
      <button type="button" class="btn btn-primary" @click="openNewTab">New tab</button> 
     </li> 
    </ul> 
    <div class="tab-content"> 
     <div v-for="tab in tabs" role="tabpanel" class="tab-pane" :class="{active:tab.isActive}"> 
      <app-querybrowsertab :tab="tab"></app-querybrowsertab> 
     </div> 
    </div> 
    <pre>{{ $data | json }}</pre> 
</div> 
</template> 

<script> 
import QueryBrowserTab from './QueryBrowserTab.vue'; 
export default { 
    data: function(){ 
     return { 
      tabs: [{ 
       name: "tab1", 
       id : 0, 
       isActive: true 
      }], 
      activeTab: {} 

     }  
    }, 


    ready: function() { 
     this.setActive(this.tabs[0]); 
    }, 

    methods: { 
     setActive: function (tab) { 
      var self = this; 
      tab.isActive = true; 
      this.activeTab = tab; 
      /*this.activeTab.isActive = true; 
      console.log("activeTab name=" + this.activeTab.name);*/ 
      this.tabs.forEach(function (tab) { 
       if (tab.id !== self.activeTab.id) { tab.isActive = false;} 
      }); 
     }, 
     openNewTab: function() { 
      newTab = { 
       name: "tab" + (this.tabs.length + 1), 
       id: this.tabs.length, 
       isActive: true 
      }; 
      this.tabs.push(newTab); 
      this.setActive(newTab); 
      /*this.activeTab = newTab; 
      console.log("### newtab name=" + newTab.name);*/ 

     }, 
     test: function() { 
      alert('676767'); 
     }, 
     closeTab: function() { 
      console.log("### CLOSE!"); 
     } 
    } 
} 

ファイルQueryBrowserTab：

<template> 
<div> 
    <p>querybbbTab</p> 
    <h3>{{tab.name}}</h3> 
    <h3>{{tab.id}}</h3> 
</div> 
</template> 

<script> 
    import QueryBrowserContainer from './QueryBrowserContainer.vue'; 
    export default { 
     data: function() { 
      return { 
       databaseOptions: [], 
      }; 
     }, 
     props: ['tab'], 

     methods: {}, 
     components: { 
      'app-querybrowsercontainer': QueryBrowserContainer 
     } 
    } 
</script> 

ファイルのApp：

<template> 
    <div id="app"> 
    <app-message></app-message> 
    <app-querybrowsertab></app-querybrowsertab> 
    <app-querybrowsercontainer></app-querybrowsercontainer> 
    </div> 
</template> 

<script> 
    export default { 
    name: 'app', 
    data() { 
     return {} 
    } 
    } 
</script> 

Answer 1

これは、ファイルに思える：QueryBrowserTabは、あなたがtab小道具を合格していないが、あなたはそれを使用している、あなたは、あなたがそれを使用しているどんな場所から小道具としてtabに合格します。

ドキュメント hereで述べたように

、次のようなコンポーネントに小道具を渡すことができます：あなたはすでにアプリ-querybrowsercontainerでやっている

<app-querybrowsertab :tab="tab"></app-querybrowsertab> 

が、ファイルでのApp、あなたはありませんあなたのためにエラーの原因かもしれない小道具を渡してください。