vue請(qǐng)求服務(wù)器數(shù)據(jù)后綁定不上的解決方法
更新時(shí)間：2019年10月30日 09:13:58 作者：零食粉碎機(jī)
今天小編就為大家分享一篇vue請(qǐng)求服務(wù)器數(shù)據(jù)后綁定不上的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
后臺(tái)返回的數(shù)據(jù)，json類型
{"success":1,"tagList":[{"Id":1,"name":"林俊杰"},{"Id":2,"name":"MV"},{"Id":3,"name":"三次元"},{"Id":4,"name":"燃"},{"Id":5,"name":"宅"}]}
Vue綁定UI的代碼
<div class="tag-wrapper">
<a class="tag-item" v-for="item in tagList">{{item.name}}</a>
</div>
下面是Vue請(qǐng)求數(shù)據(jù)的代碼
var hotTag=new Vue({
el:".tag-wrapper",
data:{
tagList:[],
selected_num:0
},
mounted:function(){
this.init();
},
methods:{
init:function(){
axios.get("handle/getHotTag").then( function(result) {
this.tagList = result.data.tagList;
})
// axios.get("handle/getHotTag").then( (result) => {
// this.tagList = result.data.tagList;
// })
}
}
});
出來的結(jié)果是空的，a.tag-item沒有出現(xiàn)，但是在init函數(shù)中打印this.tagList則是存在數(shù)據(jù)的。
將函數(shù)換成雙箭頭形式發(fā)現(xiàn)成功的綁定上了，原因還不知道
axios.get("handle/getHotTag").then( (result) => {
this.tagList = result.data.tagList;
})
以上這篇vue請(qǐng)求服務(wù)器數(shù)據(jù)后綁定不上的解決方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
基于ElementUI中Table嵌套實(shí)現(xiàn)多選的示例代碼
這篇文章主要介紹了基于ElementUI中Table嵌套實(shí)現(xiàn)多選的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
基于vue.js仿淘寶收貨地址并設(shè)置默認(rèn)地址的案例分析
這篇文章主要介紹了基于vue.js仿淘寶收貨地址并設(shè)置默認(rèn)地址的案例分析,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-08
關(guān)于vue-cli-service:command?not?found報(bào)錯(cuò)引發(fā)的實(shí)戰(zhàn)案例
這篇文章主要給大家介紹了關(guān)于vue-cli-service:command?not?found報(bào)錯(cuò)引發(fā)的相關(guān)資料,文中通過實(shí)例代碼將解決的過程介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-02-02
本篇文章主要介紹了深入理解Vue生命周期和手動(dòng)掛載，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
父組件向子組件傳值，使用 props：可以通過在子組件上綁定 props，然后在父組件中通過 v-bind 綁定相應(yīng)的數(shù)據(jù)來傳遞數(shù)據(jù)，這篇文章主要介紹了Vue?組件之間傳值的方法,需要的朋友可以參考下2023-12-12
Ant Design moment對(duì)象和字符串之間的相互轉(zhuǎn)化教程
這篇文章主要介紹了Ant Design moment對(duì)象和字符串之間的相互轉(zhuǎn)化教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
SpringBoot結(jié)合Vue3實(shí)現(xiàn)簡(jiǎn)單的前后端交互
本文主要介紹了SpringBoot結(jié)合Vue3實(shí)現(xiàn)簡(jiǎn)單的前后端交互,結(jié)合實(shí)際案例,說明了如何實(shí)現(xiàn)前后端數(shù)據(jù)的交互,具有一定的?參考價(jià)值,感興趣的可以了解一下2023-08-08
vue-cli如何快速構(gòu)建vue項(xiàng)目
本篇文章主要介紹了vue-cli如何快速構(gòu)建vue項(xiàng)目，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
vue項(xiàng)目刷新當(dāng)前頁面的三種方式(重載當(dāng)前頁面數(shù)據(jù))
這篇文章主要介紹了vue項(xiàng)目刷新當(dāng)前頁面的三種方式(重載當(dāng)前頁面數(shù)據(jù)),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
ant desing vue table 實(shí)現(xiàn)可伸縮列的完整例子
最近在使用ant-design-vue做表格時(shí)，遇到要做一個(gè)可伸縮列表格的需求，在網(wǎng)上一直沒有找到好的方法，于是小編動(dòng)手自己寫個(gè)可以此功能，下面小編把a(bǔ)nt desing vue table 可伸縮列的實(shí)現(xiàn)代碼分享到腳本之家平臺(tái)供大家參考2021-05-05