淺談vue獲得后臺數(shù)據(jù)無法顯示到table上面的坑

更新時間：2020年08月13日 15:52:11 作者：顧南與歌

這篇文章主要介紹了淺談vue獲得后臺數(shù)據(jù)無法顯示到table上面的坑，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

因為剛學vue然后自己自習了一下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對象，然后進行了更改，數(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) {
 
      })
    }
}）

補充知識：vue data有值，但是頁面{{}} 取不到值

我的問題出在js引入的順序不對，導致不能正常顯示vue中的值

正確的順序應該是：

先引入vue的js--------html代碼-----最后引入自己寫的js

以上這篇淺談vue獲得后臺數(shù)據(jù)無法顯示到table上面的坑就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue中的keep-alive用法指南
keep-alive是Vue中的一個內(nèi)置組件,用于緩存非活動組件實例,避免重復渲染,優(yōu)化性能,本文給大家介紹vue中的keep-alive用法指南,感興趣的朋友一起看看吧
2024-10-10
詳解使用vue實現(xiàn)tab 切換操作
這篇文章主要介紹了詳解使用vue實現(xiàn)tab操作,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
vue-router4版本第一次打開界面不匹配路由問題解決
本文主要介紹了vue-router4版本第一次打開界面不匹配路由問題解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-04-04
vue的無縫滾動組件vue-seamless-scroll實例
本篇文章主要給大家講解了vue的無縫滾動組件vue-seamless-scroll的用法，需要的朋友參考學習下吧。
2017-12-12
vue使用動態(tài)組件實現(xiàn)TAB切換效果完整實例
在實際項目開發(fā)中,我們經(jīng)常會遇到選項卡切換,對于一個前端工程師來說,組件化/模塊化開發(fā)是一種必備的行為規(guī)范,下面這篇文章主要給大家介紹了關(guān)于vue使用動態(tài)組件實現(xiàn)TAB切換效果的相關(guān)資料,需要的朋友可以參考下
2023-05-05
Vue項目首屏性能優(yōu)化組件實戰(zhàn)指南
Vue眾所周知是一個輕量級的框架,源碼僅僅為72.9KB,但是也有它自己的缺點,就是首屏加載會比較慢,這篇文章主要給大家介紹了關(guān)于Vue項目首屏性能優(yōu)化組件的相關(guān)資料,需要的朋友可以參考下
2021-11-11
教你一招解決vue頁面自適應布局
在前端開發(fā)的時候經(jīng)常會遇到這樣的困惑,設計師給你的設計稿的尺寸和頁面的尺寸不一致,導致了頁面無法正常顯示,下面這篇文章主要給大家介紹了關(guān)于一招解決vue頁面自適應布局的相關(guān)資料,需要的朋友可以參考下
2022-07-07
vue內(nèi)置組件Transition的示例詳解
這篇文章主要介紹了vue內(nèi)置組件Transition的詳解,簡單地說，就是當元素發(fā)生變化，比如消失、顯示時，添加動畫讓它更自然過渡，它是vue內(nèi)置組件，不需要引入注冊就可以直接使用，本文通過實例代碼介紹的非常詳細，需要的朋友可以參考下
2023-09-09
Vue模板內(nèi)引入的組件樣式覆蓋失效原因及解決
這篇文章主要介紹了Vue模板內(nèi)引入的組件樣式覆蓋失效原因及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue將文件/圖片批量打包下載zip的教程
這篇文章主要介紹了vue將文件/圖片批量打包下載zip的教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10