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()函数的三种语法介绍
Oct 09 Javascript
javaScript实现浮点数转十六进制字符
Oct 29 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
JavaScript对数组进行随机重排的方法
Jul 22 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
Mar 26 Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 Javascript
微信小程序实现动态获取元素宽高的方法分析
Dec 10 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
Vue+Element实现网页版个人简历系统(推荐)
Dec 31 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
May 29 Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 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
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
使用JQuery进行跨域请求
2010/01/25 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
bootstrap table表格插件使用详解
2017/05/08 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
亲自动手实现vue日历控件
2019/06/26 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
2020/11/06 Javascript
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
python实现倒计时的示例
2014/02/14 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
Python给图像添加噪声具体操作
2019/03/03 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
详解python中的数据类型和控制流
2019/08/08 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
基于Pyinstaller打包Python程序并压缩文件大小
2020/05/28 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
最新远光软件笔试题面试题内容
2013/11/08 面试题
《骆驼和羊》教学反思
2014/02/27 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书
中秋节慰问信
2015/02/15 职场文书
死者家属慰问信
2015/03/24 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书
导游词之河北白洋淀
2020/01/15 职场文书
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL
新的CSS 伪类函数 :is() 和 :where()示例详解
2022/08/05 HTML / CSS