利用vue做项目的时候会有让用户选择当前页面的某些数据,然后再跳到下一页,而下一页是根据上一页的数据来的,有时候选择了上一页的不同选项,下一页的数据可能还是之前的
这个就属于vue的数据获取问题
解决办法是将数据获取封装到一个函数中,然后created钩子函数中调用这个函数,再在watch选项中设置监听路由的变化,通过不同的路由变化来确定是否需要重新获取数据
如代码
//先在methods里封装获取数据的方法 methods:{ clear(){ localStorage.removeItem('userills'); }, fetchData(){ this.illness = []; let xuhaonum = localStorage.getItem('nums'); let xuhao = xuhaonum.replace(/d+/g,''); let _this = this; axios.get(url+'?xuhao='+xuhao).then(function(res){ console.log(res); let condition = res.data.data.zhengzhuang; let len = condition.length; for(let i = 0;i<len;i++){ let items = { key:'', value:'', flag:'' } items.value = condition[i].sName; items.key = condition[i].sID; items.flag = condition[i].nFlag; _this.illness.push(items); //这里要构造key = sname value = 下一个页面的参数 } }).catch(function(err){ _this.showerror = !_this.showerror; }) }, }, //然后在create中调用 created(){ this.fetchData(); this.clear(); }, //利用watch来监视路由的变化来确定是否要再次获取数据 watch:{ '$route':"fetchData" },
//另外,如果多个数据需要获取,可以采用将watch写成数组的形式,之前不知道要写成数组的形式,后面的覆盖了前面写的。造成一些bug。多个数据获取就写成如下的
watch:{ '$route':["fetchData","clear"] },