为什么没有定义对象？

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，但在文件应用，你是不是传递道具，这可能是你的错误来源。