我們在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
<ul> <h3 class="tit">規格信息</h3> <li> <span class="key">設備慣用名</span> <span class="val">{{equipData.convent_eq}}</span> </li> <li> <span class="key">設備名稱</span> <span class="val">{{equipData.eq_name}}</span> </li> <li> <span class="key">規格型號</span> <span class="val">{{equipData.modelno}}</span> </li> <li v-if="show"> <span class="key">采購價格</span> <span class="val">{{equipData.cost_purchase}}</span> </li> </ul>可以這樣寫，computed 屬性，當equipData發生變化時，頁面會自動渲染，如果數據沒有獲取到，默認它為空，這樣就不會報錯
computed:{ equipData:function () { return this.$store.state.retData.eqInfo||'' } },以上這篇vue異步axios獲取的數據渲染到頁面的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
