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 性能优化指南(3)
May 21 Javascript
图片onload事件触发问题解决方法
Jul 31 Javascript
js模拟点击事件实现代码
Nov 06 Javascript
JS分页控件 可用于无刷新分页
Jul 23 Javascript
eclipse如何忽略js文件报错(附图)
Oct 30 Javascript
浅析tr的隐藏和显示问题
Mar 05 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
Mar 28 Javascript
express的中间件basicAuth详解
Dec 04 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 Javascript
Node.js 进程平滑离场剖析小结
Jan 24 Javascript
Vue实现图书管理小案例
Dec 03 Vue.js
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 截取字符串 分别适合GB2312和UTF8编码情况
2009/02/12 PHP
php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
2020/04/05 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
在JavaScript中处理数组之reverse()方法的使用
2015/06/09 Javascript
Java中Timer的用法详解
2015/10/21 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
浅谈React中组件间抽象
2018/01/27 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
给我一面国旗 python帮你实现
2019/09/30 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
2020/09/25 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
python爬取微博评论的实例讲解
2021/01/15 Python
HTML5的新特性(1)
2016/03/03 HTML / CSS
西班牙语在线票务市场:SuperBoletería
2019/06/10 全球购物
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
秋季校运动会广播稿
2014/02/23 职场文书
股权转让意向书
2014/04/01 职场文书
生态养殖创业计划书
2014/05/06 职场文书
教师个人年度总结
2015/02/11 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
Java 异步任务计算FutureTask
2022/04/28 Java/Android
5个实用的JavaScript新特性
2022/06/16 Javascript