为什么没有定义对象?
[英] Why is object not defined?
本文介绍了为什么没有定义对象?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想尝试 Vue.js 2 并从一个简单的例子开始.我从这里拿了这个 https://jsfiddle.net/gmsa/gfg30Lgv/ 和用它创建了一个简单的项目.在我将此代码分成文件后，该项目不起作用.所以我把数据属性变成了一个函数:
数据:function(){返回 {标签:[{名称:tab1"，编号:0，isActive: 真}],活动标签:{}}},
但是在控制台中有一个错误:Uncaught ReferenceError: newTab is not defined.
项目:https://github.com/rinatoptimus/vue-webpack-delete
文件查询浏览器容器:
<div id="queryBrowserContainer"><p>queryBrowserContainer 文本</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><button type="button" class="btn btn-primary" @click="openNewTab">新建标签</button><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>
<pre>{{ $data |json }}</pre>
</模板><脚本>从'./QueryBrowserTab.vue'导入QueryBrowserTab；导出默认{数据:函数(){返回 {标签:[{名称:tab1"，编号:0，isActive: 真}],活动标签:{}}},准备好:函数(){this.setActive(this.tabs[0]);},方法: {setActive:功能(标签){var self = this;tab.isActive = true;this.activeTab = 标签；/*this.activeTab.isActive = true;console.log("activeTab name=" + this.activeTab.name);*/this.tabs.forEach(函数(标签){if (tab.id !== self.activeTab.id) { tab.isActive = false;}});},openNewTab: 函数 () {新标签 = {名称:标签"+(this.tabs.length + 1)，id: this.tabs.length,isActive: 真};this.tabs.push(newTab);this.setActive(newTab);/*this.activeTab = newTab;console.log("### newtab name=" + newTab.name);*/},测试:函数(){警报('676767')；},closeTab:函数(){console.log("### 关闭！");}}}
文件查询浏览器标签:
<div><p>querybbbTab</p><h3>{{tab.name}}</h3><h3>{{tab.id}}</h3>
</模板><脚本>从 './QueryBrowserContainer.vue' 导入 QueryBrowserContainer；导出默认{数据:函数(){返回 {数据库选项:[]，};},道具:['标签']，方法: {}，成分: {'app-querybrowsercontainer': QueryBrowserContainer}}
文件应用:
<div id="应用程序"><app-message></app-message><app-querybrowsertab></app-querybrowsertab><app-querybrowsercontainer></app-querybrowsercontainer>
</模板><脚本>导出默认{名称:'应用'，数据 () {返回 {}}}
解决方案
好像在文件:QueryBrowserTab，你还没有通过 tab 道具，但是你正在使用它，请确保您将 tab 作为道具从您使用它的任何地方传递.
如文档此处所述，您可以传递道具到如下组件:
您已经在 app-querybrowsercontainer 中执行的操作，但是在文件 App 中，您没有传递道具，这可能是您的错误来源.
I want to try Vue.js 2 and started with a simple example. I've took this one from here https://jsfiddle.net/gmsa/gfg30Lgv/ and created a simple project with it. After I divided this code into files the project doesn't work. So I've made a data property a function:
data: function(){
return {
tabs: [{
name: "tab1",
id : 0,
isActive: true
}],
activeTab: {}
}
},
But there's an error in a console: Uncaught ReferenceError: newTab is not defined.
Project: https://github.com/rinatoptimus/vue-webpack-delete
File 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!");
}
}
}
File 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>
File 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>
解决方案
It seems in file: QueryBrowserTab, you have not passed tab props, but you are using it, make sure you pass tab as props from whatever places you are using it.
As stated in the docs here, you can pass props to a component like following:
<app-querybrowsertab :tab="tab"></app-querybrowsertab>
which you are already doing in app-querybrowsercontainer,but in file App, you are not passing the prop, which might be the source of error for you.
这篇关于为什么没有定义对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
