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 相关文章推荐
取键盘键位ASCII码的网页
Jul 30 Javascript
js arguments.callee的应用代码
May 07 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
Oct 27 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
基于layui数据表格以及传数据的方式
Aug 19 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
详解在网页上通过JS实现文本的语音朗读
Mar 28 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
如何使用原生Js实现随机点名详解
Jan 06 Javascript
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
thinkphp多层MVC用法分析
2015/12/30 PHP
PHP随机数 C扩展随机数
2016/05/04 PHP
Javascript 解疑
2009/11/11 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
JS实现去除数组中重复json的方法示例
2017/12/21 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
Python的gevent框架的入门教程
2015/04/29 Python
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
python实现类之间的方法互相调用
2018/04/29 Python
浅谈django的render函数的参数问题
2018/10/16 Python
python实现kmp算法的实例代码
2019/04/03 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
Python-opencv实现红绿两色识别操作
2020/06/04 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
香港演唱会订票网站:StubHub香港
2019/10/10 全球购物
经典优秀个人求职自荐信格式
2013/09/25 职场文书
应届电子商务毕业自荐书范文
2014/02/11 职场文书
创先争优活动方案
2014/02/12 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
小学感恩节活动总结
2015/03/24 职场文书
介绍信格式样本
2015/05/05 职场文书
2015年管理人员工作总结
2015/05/13 职场文书
详解在OpenCV中如何使用图像像素
2022/03/03 Python