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 相关文章推荐
一段利用WSH修改和查看IP配置的代码
May 11 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
Jquery 切换不同图片示例代码
Dec 05 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 Javascript
jQuery链式调用与show知识浅析
May 11 Javascript
canvas的神奇用法
Feb 03 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
May 07 Javascript
vue移动端城市三级联动组件使用详解
Jul 26 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
Vue基于localStorage存储信息代码实例
Nov 16 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
如何去掉文章里的 html 语法
2006/10/09 PHP
php中截取中文字符串的代码小结
2011/07/17 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
jQuery中:submit选择器用法实例
2015/01/03 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
Angular多选、全选、批量选择操作实例代码
2017/03/10 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
vue 使用ref 让父组件调用子组件的方法
2018/02/08 Javascript
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
Python实现短网址ShortUrl的Hash运算实例讲解
2015/08/10 Python
Python中set与frozenset方法和区别详解
2016/05/23 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
Python中qutip用法示例详解
2020/10/02 Python
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
高考自主招生自荐信
2013/10/20 职场文书
中学生团员自我评价分享
2013/12/07 职场文书
服务员自我评价
2014/01/25 职场文书
大型活动组织方案
2014/05/10 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers