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 相关文章推荐
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
JQuery对表单元素的基本操作使用总结
Jul 18 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
纯javascript实现选择框的全选与反选功能
Apr 08 Javascript
Vue源码解析之数据响应系统的使用
Apr 24 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 Javascript
在vue中使用jsonp进行跨域请求接口操作
Oct 29 Javascript
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 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
php 文章调用类代码
2011/08/11 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
destoon实现调用图文新闻的方法
2014/08/21 PHP
php实现通过ftp上传文件
2015/06/19 PHP
Yii调试查看执行SQL语句的方法
2016/07/15 PHP
php curl常用的5个经典例子
2017/01/20 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
PHP实现可精确验证身份证号码的工具类示例
2018/05/31 PHP
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
[01:04:22]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 IG vs EG
2018/04/01 DOTA
Python+django实现文件下载
2016/01/17 Python
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
Flask框架学习笔记之消息提示与异常处理操作详解
2019/08/15 Python
Pytorch之contiguous的用法
2019/12/31 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
创建卫生先进单位实施方案
2014/03/10 职场文书
学习2014年全国两会心得体会
2014/03/12 职场文书
秋天的图画教学反思
2014/05/01 职场文书
平面设计专业求职信
2014/08/09 职场文书
擅自离岗检讨书
2014/09/12 职场文书
护士长2014年度工作总结
2014/11/11 职场文书
平安建设汇报材料
2014/12/29 职场文书
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis