vue異步axios獲取的數(shù)據(jù)渲染到頁(yè)面的方法
更新時(shí)間：2018年08月09日 10:00:02 作者：修仙狂人
今天小編就為大家分享一篇vue異步axios獲取的數(shù)據(jù)渲染到頁(yè)面的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
我們?cè)趘ue，數(shù)據(jù)很多事異步獲取來的，如果在template直接使用，會(huì)報(bào)錯(cuò)，undefined。
因?yàn)橄蠕秩竞蟮玫降臄?shù)據(jù)，那如何才能不報(bào)錯(cuò)呢？
computed!!!
舉個(gè)例子
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
})
})
},
在創(chuàng)建時(shí)獲取數(shù)據(jù)，將其存入store
加入頁(yè)面只能這樣寫
equip.vue
<ul>
<h3 class="tit">規(guī)格信息</h3>
<li>
<span class="key">設(shè)備慣用名</span>
<span class="val">{{equipData.convent_eq}}</span>
</li>
<li>
<span class="key">設(shè)備名稱</span>
<span class="val">{{equipData.eq_name}}</span>
</li>
<li>
<span class="key">規(guī)格型號(hào)</span>
<span class="val">{{equipData.modelno}}</span>
</li>
<li v-if="show">
<span class="key">采購(gòu)價(jià)格</span>
<span class="val">{{equipData.cost_purchase}}</span>
</li>
</ul>
可以這樣寫，computed 屬性，當(dāng)equipData發(fā)生變化時(shí)，頁(yè)面會(huì)自動(dòng)渲染，如果數(shù)據(jù)沒有獲取到，默認(rèn)它為空，這樣就不會(huì)報(bào)錯(cuò)
computed:{
equipData:function () {
return this.$store.state.retData.eqInfo||''
}
},
以上這篇vue異步axios獲取的數(shù)據(jù)渲染到頁(yè)面的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)的請(qǐng)求服務(wù)器端API接口示例
這篇文章主要介紹了vue實(shí)現(xiàn)的請(qǐng)求服務(wù)器端API接口,結(jié)合實(shí)例形式分析了vue針對(duì)post、get、patch、put等請(qǐng)求的封裝與調(diào)用相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue 設(shè)置背景顏色及透明度的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-06-06
基于elementUI使用v-model實(shí)現(xiàn)經(jīng)緯度輸入的vue組件
這篇文章主要介紹了基于elementUI使用v-model實(shí)現(xiàn)經(jīng)緯度輸入的vue組件,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
vue如何使用pdf.js實(shí)現(xiàn)在線查看pdf文件功能
PDF.js是一個(gè)開源的JavaScript庫(kù),用于在網(wǎng)頁(yè)上渲染和顯示PDF文件,在Vue中使用PDF.js來預(yù)覽PDF文件是很常見的需求,這篇文章主要給大家介紹了關(guān)于vue如何使用pdf.js實(shí)現(xiàn)在線查看pdf文件功能的相關(guān)資料,需要的朋友可以參考下2024-03-03
vue.js響應(yīng)式原理解析與實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了vue.js響應(yīng)式原理解析與實(shí)現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
Vue文件如何轉(zhuǎn)換成base64并去除多余的文件類型前綴
這篇文章主要介紹了Vue文件如何轉(zhuǎn)換成base64并去除多余的文件類型前綴問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
詳細(xì)講一講vue3下會(huì)造成響應(yīng)式丟失的情況
vue3開發(fā)過程中,綁定的響應(yīng)式數(shù)據(jù)失去了響應(yīng)式,如何解決問題呢,下面這篇文章主要給大家介紹了關(guān)于vue3下會(huì)造成響應(yīng)式丟失的情況,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章介紹了Vue項(xiàng)目中使用Bootstrap的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
一文解決vue2 element el-table自適應(yīng)高度問題
在寫公司后臺(tái)項(xiàng)目的時(shí)候遇到一個(gè)需求,要求表格頁(yè)面不能有滾動(dòng)條,所以必須封裝一個(gè)公共方法來實(shí)現(xiàn)表格自適應(yīng)高度,本問小編給大家介紹了如何解決vue2 element el-table自適應(yīng)高度問題,需要的朋友可以參考下2023-11-11
vue實(shí)現(xiàn)點(diǎn)擊按鈕下載文件功能
這篇文章主要介紹了vue中點(diǎn)擊按鈕下載文件，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10