vue异步axios获取的数据渲染到页面的方法
我们在vue,数据很多事异步获取来的,如果在template直接使用,会报错,undefined。
因为先渲染后得到的数据,那如何才能不报错呢?
computed!!!
举个例子
index.vue
忽略坑人的传参方式。。。
created(){ this.init() this.axios.post('/wanwei/appserver/eqInfo/eqBaseInfo?reqjson={"eq_code":"BJTE1W03011SF001SBQDGPXTGYKG001"}').then((res)=>{ this.$nextTick(()=>{ this.$store.state.retData=res.data.retdata }) }) },
在创建时获取数据,将其存入store
加入页面只能这样写
equip.vue
-
设备惯用名 {{equipData.convent_eq}} -
设备名称 {{equipData.eq_name}} -
规格型号 {{equipData.modelno}}
可以这样写,computed属性,当equipData发生变化时,页面会自动渲染,如果数据没有获取到,默认它为空,这样就不会报错
computed:{ equipData:function(){ returnthis.$store.state.retData.eqInfo||'' } },
以上这篇vue异步axios获取的数据渲染到页面的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。