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的获取mouse坐标插件的实现代码
Apr 01 Javascript
关于递归运算的顺序测试代码
Nov 30 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
JS实现淘宝幻灯片效果的实现方法
Mar 22 Javascript
js中iframe调用父页面的方法
Oct 30 Javascript
JS实现的几个常用算法
Nov 12 Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
JS非空验证及邮箱验证的实例
Aug 11 Javascript
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
ionic2中使用自动生成器的方法
Mar 04 Javascript
javascript设计模式之装饰者模式
Jan 30 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项目的方法
2006/10/09 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
JS版的date函数(和PHP的date函数一样)
2014/05/12 Javascript
JavaScript和CSS交互的方法汇总
2014/12/02 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
推荐几个不错的console调试技巧实现
2019/12/20 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
Python NumPy库安装使用笔记
2015/05/18 Python
Python基于PycURL实现POST的方法
2015/07/25 Python
Python实现购物车功能的方法分析
2017/11/10 Python
python奇偶行分开存储实现代码
2018/03/19 Python
详解pyqt5 动画在QThread线程中无法运行问题
2018/05/05 Python
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
Python发送邮件实现基础解析
2020/08/14 Python
Python使用pyenv实现多环境管理
2021/02/05 Python
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
Wojas罗马尼亚网站:波兰皮鞋品牌
2018/11/01 全球购物
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
请解释在new与override的区别
2012/10/29 面试题
一道输出判断型Java面试题
2014/10/01 面试题
班级德育工作实施方案
2014/02/21 职场文书
实习证明格式范文
2014/10/14 职场文书
三峡人家导游词
2015/01/31 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
一文解答什么是MySQL的回表
2022/08/05 MySQL