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 相关文章推荐
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
Jan 08 Javascript
jQuery实现长文字部分显示代码
May 13 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 Javascript
JavaScript变量的作用域全解析
Aug 14 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
Sep 23 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
详解vue-cli 本地开发mock数据使用方法
May 29 Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 Javascript
如何在CocosCreator里画个炫酷的雷达图
Apr 16 Javascript
JavaScript数组reduce()方法的语法与实例解析
Jul 07 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
咖啡因含量是由谁决定的?低因咖啡怎么来?低因咖啡适合什么人喝
2021/03/06 新手入门
php简单的留言板与回复功能具体实现
2014/02/19 PHP
easyui的tabs update正确用法分享
2014/03/21 PHP
两种设置php载入页面时编码的方法
2014/07/29 PHP
Yii2设置默认控制器的两种方法
2017/05/19 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
vue.js实现表格合并示例代码
2016/11/30 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python网页请求urllib2模块简单封装代码
2014/02/07 Python
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
python实现超市扫码仪计费
2018/05/30 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
Python使用pyautocad+openpyxl处理cad文件示例
2019/07/11 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
python zip()函数使用方法解析
2019/10/31 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
《跨越百年的美丽》教学反思
2014/02/11 职场文书
《猫》教学反思
2014/02/26 职场文书
初婚未育证明样本
2014/10/24 职场文书