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 相关文章推荐
Stop SQL Server
Jun 21 Javascript
javascript 随机展示头像实现代码
Dec 06 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
用js来刷新当前页面保留参数的具体实现
Dec 23 Javascript
jquery进行数组遍历如何跳出当前的each循环
Jun 05 Javascript
JavaScript中的函数嵌套使用
Jun 04 Javascript
jQuery+正则+文本框只能输入数字的实现方法
Oct 07 Javascript
Angular.js基础学习之初始化
Mar 10 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
vue使用showdown并实现代码区域高亮的示例代码
Oct 17 Javascript
JavaScript原型式继承实现方法
Nov 06 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
《PHP边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
php格式化电话号码的方法
2015/04/24 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
js修改input的type属性问题探讨
2013/10/12 Javascript
JS对HTML标签select的获取、添加、删除操作
2013/10/17 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
js控制input输入字符解析
2013/12/27 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
2015/03/03 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
2016/12/26 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
跟老齐学Python之深入变量和引用对象
2014/09/24 Python
跟老齐学Python之编写类之三子类
2014/10/11 Python
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
Python实现的HMacMD5加密算法示例
2018/04/03 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
Linux操作面试题
2012/05/16 面试题
会计与出纳自荐书范文
2014/03/16 职场文书
文秘自荐信
2014/06/28 职场文书
爱与责任师德演讲稿
2014/08/26 职场文书
公司出差管理制度范本
2015/08/05 职场文书
MySQL中你可能忽略的COLLATION实例详解
2021/05/12 MySQL
如何获取numpy array前N个最大值
2021/05/14 Python