淺談vue獲得后臺數(shù)據(jù)無法顯示到table上面的坑
因?yàn)閯倢W(xué)vue然后自己自習(xí)了一下axios,然后想寫一個簡單的查詢后臺數(shù)據(jù)
<tr v-for=' user in uList'><td>{{user.id}}</td><td>{{user.name}}</td><td>{{user.gender}}</td></td></tr>
然后先是寫了這樣一個代碼
created: function () { axios.get('http://localhost:8080/student/findAll').then(function (response) { this.uList = response.data;console.log(uList); }).catch(function (reason) { }) }
然后后臺可以獲取到數(shù)據(jù),但是無法顯示到table上面
發(fā)現(xiàn)this.uList雖然改變的數(shù)據(jù)但是數(shù)據(jù)無法顯示到table上面
然后發(fā)現(xiàn)這里的this不是外部的this對象,然后進(jìn)行了更改,數(shù)據(jù)就回顯了
new Vue({ el:’#app’, data:{ uList:[], }, created: function () { var arr = this; axios.get('http://localhost:8080/student/findAll').then(function (response) {arr.uList = response.data;console.log(uList); }).catch(function (reason) { }) }})
補(bǔ)充知識:vue data有值,但是頁面{{}} 取不到值
我的問題出在js引入的順序不對,導(dǎo)致不能正常顯示vue中的值
正確的順序應(yīng)該是:
先引入vue的js--------html代碼-----最后引入自己寫的js
以上這篇淺談vue獲得后臺數(shù)據(jù)無法顯示到table上面的坑就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. 存儲于xml中需要的HTML轉(zhuǎn)義代碼2. python 浮點(diǎn)數(shù)四舍五入需要注意的地方3. Java GZip 基于內(nèi)存實(shí)現(xiàn)壓縮和解壓的方法4. JAMon(Java Application Monitor)備忘記5. 完美解決vue 中多個echarts圖表自適應(yīng)的問題6. Springboot 全局日期格式化處理的實(shí)現(xiàn)7. SpringBoot+TestNG單元測試的實(shí)現(xiàn)8. python開發(fā)一款翻譯工具9. 利用CSS制作3D動畫10. jsp+servlet簡單實(shí)現(xiàn)上傳文件功能(保存目錄改進(jìn))
