两个 vue 第一个 get 后传值给第二个,第二个渲染时报错
发布于 7 年前 作者 tomvision 2263 次浏览 最后一次编辑是 7 年前 来自 问答
粉丝福利 : 关注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)
			  })
  
			})
		  }
	  }
  });
回到顶部