淺談vue獲得后臺(tái)數(shù)據(jù)無法顯示到table上面的坑
因?yàn)閯倢W(xué)vue然后自己自習(xí)了一下axios,然后想寫一個(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>
然后先是寫了這樣一個(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ù),但是無法顯示到table上面
發(fā)現(xiàn)this.uList雖然改變的數(shù)據(jù)但是數(shù)據(jù)無法顯示到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有值,但是頁面{{}} 取不到值
我的問題出在js引入的順序不對(duì),導(dǎo)致不能正常顯示vue中的值
正確的順序應(yīng)該是:
先引入vue的js--------html代碼-----最后引入自己寫的js
以上這篇淺談vue獲得后臺(tái)數(shù)據(jù)無法顯示到table上面的坑就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- vuex中遇到的坑,vuex數(shù)據(jù)改變,組件中頁面不渲染操作
- 解決Vue大括號(hào)字符換行踩的坑
- 解決Vue watch里調(diào)用方法的坑
- 淺談Vue使用Cascader級(jí)聯(lián)選擇器數(shù)據(jù)回顯中的坑
- 淺談vue websocket nodeJS 進(jìn)行實(shí)時(shí)通信踩到的坑
- Vue父子組件傳值的一些坑
- 淺談vue項(xiàng)目利用Hbuilder打包成APP流程,以及遇到的坑
- 淺談vue中使用編輯器vue-quill-editor踩過的坑
- 解決vue 給window添加和移除resize事件遇到的坑
- vue項(xiàng)目使用高德地圖的定位及關(guān)鍵字搜索功能的實(shí)例代碼(踩坑經(jīng)驗(yàn))
- 學(xué)習(xí) Vue.js 遇到的那些坑
相關(guān)文章
Vue3通過hooks方式封裝節(jié)流和防抖的代碼詳解
vue3 中的 hooks 就是函數(shù)的一種寫法,就是將文件的一些單獨(dú)功能的js代碼進(jìn)行抽離出來,放到單獨(dú)的js文件中,或者說是一些可以復(fù)用的公共方法/功能,本文給大家介紹了Vue3通過hooks方式封裝節(jié)流和防抖,需要的朋友可以參考下2024-10-10解決vuejs 使用value in list 循環(huán)遍歷數(shù)組出現(xiàn)警告的問題
今天小編就為大家分享一篇解決vuejs 使用value in list 循環(huán)遍歷數(shù)組出現(xiàn)警告的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09如何使用vue-json-viewer插件展示JSON格式數(shù)據(jù)
這篇文章主要給大家介紹了關(guān)于如何使用vue-json-viewer插件展示JSON格式數(shù)據(jù)的相關(guān)資料,Vue-json-viewer是一個(gè)Vue組件,用于在Vue應(yīng)用中顯示JSON數(shù)據(jù)的可視化工具,需要的朋友可以參考下2023-11-11vue初嘗試--項(xiàng)目結(jié)構(gòu)(推薦)
這篇文章主要介紹了vue初嘗試--項(xiàng)目結(jié)構(gòu)的相關(guān)知識(shí),需要的朋友可以參考下2018-01-01vue flex 布局實(shí)現(xiàn)div均分自動(dòng)換行的示例代碼
這篇文章主要介紹了vue flex 布局實(shí)現(xiàn)div均分自動(dòng)換行,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08Vue突然報(bào)錯(cuò)doesn‘t?work?properly?without?JavaScript?enabled
最近在做項(xiàng)目的時(shí)候遇到了些問題,所以這篇文章主要給大家介紹了關(guān)于Vue突然報(bào)錯(cuò)doesn‘t?work?properly?without?JavaScript?enabled的解決方法,需要的朋友可以參考下2023-01-01說說如何在Vue.js中實(shí)現(xiàn)數(shù)字輸入組件的方法
這篇文章主要介紹了說說如何在Vue.js中實(shí)現(xiàn)數(shù)字輸入組件的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01