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 相关文章推荐
JavaScript中Math对象使用说明
Jan 16 Javascript
基于jquery的inputlimiter 实现字数限制功能
May 30 Javascript
Jquery:ajax实现翻页无刷新功能代码
Aug 05 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
Jan 06 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
Feb 19 Javascript
ExtJS4 表格的嵌套 rowExpander应用
May 02 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
JS实现吸顶特效
Jan 08 Javascript
vue在图片上传的时候压缩图片
Nov 18 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
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
php google或baidu分页代码
2009/11/26 PHP
php的一些小问题
2010/07/03 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
动态加载js的几种方法
2006/10/23 Javascript
js树形控件脚本代码
2008/07/24 Javascript
jQuery each()方法的使用方法
2010/03/18 Javascript
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
2013/11/12 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
跟我学习javascript的作用域与作用域链
2015/11/19 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
Vue简单实现原理详解
2020/05/07 Javascript
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
python实现的分层随机抽样案例
2020/02/25 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
初二政治教学反思
2014/01/12 职场文书
试用期员工考核制度
2014/01/22 职场文书
如何写一份好的英文求职信
2014/03/19 职场文书
个人承诺书怎么写
2014/05/24 职场文书
集中采购方案
2014/06/10 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
岳麓书院导游词
2015/02/03 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript