vue请求服务器数据后绑定不上的解决方法


Posted in Javascript onOctober 30, 2019

后台返回的数据,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请求数据的代码

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;
     // })
 
    }
   }
 
  });

出来的结果是空的,a.tag-item没有出现,但是在init函数中打印this.tagList则是存在数据的。

将函数换成双箭头形式发现成功的绑定上了,原因还不知道

axios.get("handle/getHotTag").then( (result) => {
      this.tagList = result.data.tagList;
     })

以上这篇vue请求服务器数据后绑定不上的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤
Apr 23 Javascript
Javascript 文件夹选择框的两种解决方案
Jul 01 Javascript
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
Dec 02 Javascript
jquery鼠标停止移动事件
Dec 21 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 Javascript
jquery实现的放大镜效果示例
Feb 24 jQuery
vue中的mescroll搜索运用及各种填坑处理
Oct 30 #Javascript
vue解决花括号数据绑定不成功的问题
Oct 30 #Javascript
vue中使用rem布局代码详解
Oct 30 #Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
Oct 30 #Javascript
Vue中图片Src使用变量的方法
Oct 30 #Javascript
解决VUE双向绑定失效的问题
Oct 29 #Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 #Javascript
You might like
PHP中输出转义JavaScript代码的实现代码
2011/04/22 PHP
PHP解析目录路径的3个函数总结
2014/11/18 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
python实现查询IP地址所在地
2015/03/29 Python
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
Python中关于Sequence切片的下标问题详解
2017/06/15 Python
python制作小说爬虫实录
2017/08/14 Python
Python2与Python3的区别实例分析
2019/04/11 Python
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
机械系大学毕业生推荐信
2013/11/27 职场文书
高中生学习生活的自我评价
2013/11/27 职场文书
电子商务自荐书范文
2014/01/04 职场文书
《兰亭集序》教学反思
2014/02/11 职场文书
医学生求职信
2014/07/01 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书