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

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

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

因?yàn)閯倢W(xué)vue然后自己自習(xí)了一下axios，然后想寫(xiě)一個(gè)簡(jiǎn)單的查詢后臺(tái)數(shù)據(jù)

<tr v-for=" user in uList">
        <td>{{user.id}}</td>
        <td>{{user.name}}</td>
        <td>{{user.gender}}</td>
        </td>
</tr>

然后先是寫(xiě)了這樣一個(gè)代碼

 created: function () {    
      axios.get("http://localhost:8080/student/findAll").then(function (response) {
       this.uList = response.data;
        console.log(uList);
      }).catch(function (reason) {
 
      })
    }

然后后臺(tái)可以獲取到數(shù)據(jù)，但是無(wú)法顯示到table上面

發(fā)現(xiàn)this.uList雖然改變的數(shù)據(jù)但是數(shù)據(jù)無(wú)法顯示到table上面

然后發(fā)現(xiàn)這里的this不是外部的this對(duì)象，然后進(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ǔ)充知識(shí)：vue data有值，但是頁(yè)面{{}} 取不到值

我的問(wèn)題出在js引入的順序不對(duì)，導(dǎo)致不能正常顯示vue中的值

正確的順序應(yīng)該是：

先引入vue的js--------html代碼-----最后引入自己寫(xiě)的js

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

您可能感興趣的文章:

相關(guān)文章

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