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 相关文章推荐
游戏人文件夹程序 ver 4.03
Jul 14 Javascript
基于jquery的实现简单的表格中增加或删除下一行
Aug 01 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 Javascript
javascript实现类似超链接的效果
Dec 26 Javascript
巧用canvas
Jan 21 Javascript
防止重复发送 Ajax 请求
Feb 15 Javascript
vue中添加mp3音频文件的方法
Mar 02 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
Mar 14 Javascript
Js经典案例的实例代码
May 10 Javascript
vue滚动tab跟随切换效果
Jun 29 Javascript
JavaScript canvas动画实现时钟效果
Feb 10 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
php文档更新介绍
2011/07/22 PHP
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
php的declare控制符和ticks教程(附示例)
2014/03/21 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
DOM精简教程
2006/10/03 Javascript
JavaScript字符串String和Array操作的有趣方法
2012/12/18 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
Node.js五大应用性能技巧小结(必须收藏)
2017/08/09 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
Python去除列表中重复元素的方法
2015/03/20 Python
Python中的with...as用法介绍
2015/05/28 Python
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
Python中对象的引用与复制代码示例
2017/12/04 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
什么是python的必选参数
2020/06/21 Python
python热力图实现简单方法
2021/01/29 Python
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
次世代生活态度:Hypebeast
2018/07/05 全球购物
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
医学院学生的自我评价分享
2013/11/19 职场文书
入党思想汇报怎么写
2014/04/03 职场文书
高考寄语大全
2014/04/08 职场文书
关于学习的演讲稿
2014/05/10 职场文书
拓展训练激励口号
2014/06/17 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书