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 原型模式实现OOP的再研究
Apr 09 Javascript
JQuery中getJSON的使用方法
Dec 13 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 Javascript
javascript定时器完整实例
Feb 10 Javascript
在JavaScript的正则表达式中使用exec()方法
Jun 16 Javascript
详解Javascript中的原型OOP
Oct 12 Javascript
原生js实现可拖拽效果
Feb 28 Javascript
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
vue + vuex todolist的实现示例代码
Mar 09 Javascript
vue+axios新手实践实现登陆的示例代码
Jun 06 Javascript
AngularJS上传文件的示例代码
Nov 10 Javascript
jquery实现直播视频弹幕效果
Feb 25 jQuery
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
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
网页的分页下标生成代码(PHP后端方法)
2016/02/03 PHP
Symfony的安装和配置方法
2016/03/17 PHP
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
IE8兼容Jquery.validate.js的问题
2016/12/01 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
js实现窗口全屏示例详解
2019/09/17 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
python中对list去重的多种方法
2014/09/18 Python
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
python中树与树的表示知识点总结
2019/09/14 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
2020/08/20 HTML / CSS
市场营销工作计划书
2014/05/06 职场文书
作风转变心得体会
2014/09/02 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
办理护照工作证明
2014/10/10 职场文书
2015教师年度考核评语
2015/03/25 职场文书
关于军训的感想
2015/08/07 职场文书
如何做好工作总结!
2019/04/10 职场文书