两个 vue 第一个 get 后传值给第二个,第二个渲染时报错
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利
新写初学 也不知道描述的正不正确。。如果有其他问题看着帮忙纠正一下。。 global 里的 common 初始化时 get navs 之后传值给 index 里的 vm 页面是能正常显示的,但是 console 里有报错 Cannot read property ‘name’ of undefined 这个 name 是 navs 里的 是不是异步问题导致的报错,index 初始化时 navs 为空,先报错。common 里的 navs 得到后赋值给 index 里的 navs 再渲染? 求问怎么解决
common 是 global.js 里的,vm 是在 index.js 里的
var common = new Vue({
el: '#header',
data: {
navs: [], //导航栏数据
activeNav: 1, //当前激活的标签Id
},
beforeCreate: function() {
var self = this;
$.get("/navs", function(d) {
self.navs = d;
vm.navs = self.navs;
vm.activeNav = self.activeNav;
});
},
methods: {
switchChannel: function(id, name) {
var self = this;
self.activeNav = id;
vm.activeNav = id;
$.post("/", {
id: id
}, function(d) {
$(document).scrollTop(0);
vm.articles = [];
if(d.length == 0) return vm.activeTabLoadEnd = true;
vm.articles = d;
vm.activeTabLoadEnd = false;
})
},
}
})
var vm = new Vue({
el: '#main',
data: {
navs: [],
activeNav: 0, //当前激活的标签Id
articles: [], //文章列表数据
activeTabLoadEnd: false, //判断当前tab上拉加载是否结束
nextArticlesFlag: false, //下一次加载是否需要ajax
nextArticles: [] //上次ajax时下一页的内容
},
beforeCreate: function() {
var self = this;
$.get("/articles", function(d) {
self.articles = d;
});
},
methods: {
switchChannel: function(id, name) {
common.switchChannel(id, name);
},
loadMoreArticles: function() {
var self = this;
// 判断上一次ajax加载时的下一页是否有内容,有内容则直接加载上一次的内容不再ajax
if(self.nextArticlesFlag) {
self.nextArticles.forEach(function(data) {
self.articles.push(data)
})
return self.nextArticlesFlag = false;
}
$.post("/moreArticles", {
id: self.activeNav
}, function(d) {
// 如果下一页的内容为空时则锁定下一页按钮
if(d.nextArticles.length == 0) {
self.activeTabLoadEnd = true;
}else {
self.nextArticles = d.nextArticles;
self.nextArticlesFlag = true;
}
d.articles.forEach(function(data) {
self.articles.push(data)
})
})
}
}
});