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