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 相关文章推荐
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 Javascript
JavaScript中的apply()方法和call()方法使用介绍
Jul 25 Javascript
封装的jquery翻页滚动(示例代码)
Nov 18 Javascript
javascript判断office版本示例
Apr 11 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 Javascript
jQuery中 prop() attr()使用详解
May 19 Javascript
学习Javascript闭包(Closure)知识
Aug 07 Javascript
使用 Vue.js 仿百度搜索框的实例代码
May 09 Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 Javascript
javascript实现简单搜索功能
Mar 26 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
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
探讨:如何编写PHP扩展
2013/06/13 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
create-react-app中添加less支持的实现
2019/11/15 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
vue+echarts实现动态折线图的方法与注意
2020/09/01 Javascript
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
pytorch 可视化feature map的示例代码
2019/08/20 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
大学生专业个人学习的自我评价
2013/10/26 职场文书
教师求职信范文分享
2013/12/27 职场文书
聚美优品恶搞广告词
2014/03/14 职场文书
捐助倡议书范文
2014/04/15 职场文书
差生评语大全
2014/05/04 职场文书
质监局领导班子对照检查材料思想汇报
2014/09/27 职场文书
简易版租房协议书范本
2014/10/13 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
nginx基于域名,端口,不同IP的虚拟主机设置的实现
2021/03/31 Servers