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 scrollTop正解使用方法
Nov 14 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
原生javascript实现隔行换色
Jan 04 Javascript
jQuery表格行上移下移和置顶的实现方法
Oct 08 Javascript
javascript拖拽应用实例(二)
Mar 25 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
深入理解Node内建模块和对象
Mar 12 Javascript
Vue 刷新当前路由的实现代码
Sep 26 Javascript
JavaScript交换变量的常用方法小结【4种方法】
May 07 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
Terran历史背景
2020/03/14 星际争霸
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
php中spl_autoload详解
2014/10/17 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
我的javascript 函数链之演变
2011/04/07 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
js实现页面刷新滚动条位置不变
2016/11/27 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
详解angular 中的自定义指令之详解API
2017/06/20 Javascript
Vue中使用Sortable的示例代码
2018/04/07 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python脚本实现查找webshell的方法
2014/07/31 Python
python flask中静态文件的管理方法
2018/03/20 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
python try...finally...的实现方法
2020/11/25 Python
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
药学专业个人自我评价
2013/11/11 职场文书
外企求职信范文分享
2013/12/31 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
房屋授权委托书范本
2014/10/07 职场文书
2019安全宣传标语大全
2019/08/14 职场文书