爲什麼沒有定義對象？

Question

我想嘗試Vue.js 2並從一個簡單的例子開始。我從這裏拿了這個https://jsfiddle.net/gmsa/gfg30Lgv/並用它創建了一個簡單的項目。在將這些代碼分成文件後，該項目無法工作。所以我已經做了一個數據屬性的功能：

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

     }  
    }, 

但是在控制檯中有一個錯誤：Uncaught 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說，你可以通過道具組件像以下：

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

，你已經在做APP-querybrowsercontainer，但在文件應用，你是不是傳遞道具，這可能是你的錯誤來源。