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 相关文章推荐
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 Javascript
三种方式获取XMLHttpRequest对象
Apr 21 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
Apr 30 Javascript
使用jquery实现放大镜效果
Sep 02 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 Javascript
聊聊鉴权那些事(推荐)
Aug 22 Javascript
uploadify插件实现多个图片上传并预览
Sep 30 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
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
《心理测量者3》剧场版动画预告
2020/03/02 日漫
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
php使用百度天气接口示例
2014/04/22 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
popdiv
2006/07/14 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
微信小程序设置滚动条过程详解
2019/07/25 Javascript
node.js事件轮询机制原理知识点
2019/12/22 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
Python中针对函数处理的特殊方法
2014/03/06 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
Python标准库itertools的使用方法
2020/01/17 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
使用Python实现音频双通道分离
2020/12/25 Python
Python try except finally资源回收的实现
2021/01/25 Python
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
历史专业学生的自我评价
2014/02/28 职场文书
安全生产专项整治方案
2014/05/06 职场文书
教师工作失职检讨书
2014/09/18 职场文书
基层工作经验证明样本
2014/11/16 职场文书
初中军训感想
2015/08/07 职场文书
病假条格式范文
2015/08/17 职场文书
Python基础详解之描述符
2021/04/28 Python
nginx共享内存的机制详解
2022/03/21 Servers