Question

https://jsfiddle.net/gmsa/gfg30Lgv/ - 这是我想在我的项目中使用的示例。我创建了文件： Tabs.vue：

Vue.component('query-browser-tab', {
    template: `
        <div id="queryBrowserTab">
            <h3>{{tab.name}}</h3>
        </div>`,
    data: function () {
        return {
            databaseOptions: [],
        };
    },
    props: ['tab'],
    methods: {}
});

Container.vue：

Vue.component('query-browser-container', {
    template: `
    <div id="queryBrowserContainer" style="margin-top: 50px;margin-left: 400px;">
        <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}">
        <query-browser-tab :tab="tab"></query-browser-tab>
    </div>
</div>
 <pre>{{ $data | json }}</pre>
   </div>`,
   data: {
   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.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);
},

closeTab: function () {
    console.log("### CLOSE!");
}
}
});

页面上包含的文件。然后添加了标签

<query-browser-tab></query-browser-tab>
<query-browser-container></query-browser-container>

我在这个项目中不使用webpack。\ Console错误： “data”选项应该是一个在组件定义中返回每个实例值的函数。

渲染功能出错：（找到）

无法读取未定义的属性“名称”

我以前制作的组件工作正常。

Answer 1

＆＃34;数据＆＃34; option应该是一个返回每个实例的函数组件定义中的值。

在您使用query-browser-container的{{1}}组件中，您必须使用与data: { ... }组件相同的数据代码：

query-browser-tab

文档很明确：data must be a function。

为什么这个例子Vue.js 2不起作用？

1 个答案: