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>

档案应用：

<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 中进行了操作，但是在文件 App 中，您没有传递道具，这可能是您的错误来源。< / p>

为什么没有定义对象？

1 个答案: