vue请求服务器数据后绑定不上的解决方法

后台返回的数据，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请求服务器数据后绑定不上的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue解决花括号数据绑定不成功的问题

    如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script><

  • 详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)

    在用vue做前端开发的时候,因为一般跑vue使用的webpack自带的node服务,而我们实际要使用的数据确是后台服务器上的,所以这就涉及到服务器请求跨域的问题.本来在诸如axios之类的网络请求参数里面配置 withCredentials: true, 就可以解决跨域问题的,但是现在浏览器比如chorme有做了新的跨域限制,比如要服务器端配置允许跨域才行,详见跨域问题解决,是英文的,看起来需要花点功夫:那有没有不需要服务器端配置就能解决浏览器的跨域问题的办法呢?答案肯定是有的!! 这里就说ch

  • vue.js数据绑定的方法（单向、双向和一次性绑定）

    vue.js数据绑定的方法（单向、双向和一次性绑定）

    这两天学习了vue.js数据绑定这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 前言 感觉 vue 的很多方面的内容,都参考了 angular 的东西,数据绑定方面,更是赤裸裸的"抄袭".对照来看,更有助于我们学习和理解框架本身透露出来的思想,而非框架本身. 一.单向绑定 (一)Mustache 语法,双大括号 {{}}(html 内字符串绑定) <div id="app"> <p>{{text}}</p> <

  • 解决VUE双向绑定失效的问题

    双向绑定失效的原因有很多. lz就说最近遇到的. 是的,单价下的那个输入框我用了双向绑定(比如叫price,比如100).然后ipnut 键入中文时,(即使我做了输入验证).回车时虽然框中不会保留中文,但事实上VUE的双向绑定已经失效了.不管你后面输入什么,绑定的price保存的值只会是中文前的那个值(100). 这样就导致 表面好像没事,但是当你提交时就数据不对了. 还有一种是. 是日期控件(bootstrap的)的问题,部分控件才会.mmp哦,当lz用这个空间选定日期时.以为美滋滋的一次搞定

  • Vue请求JSON Server服务器数据的实现方法

    Vue请求JSON Server服务器数据的实现方法

    由于这里是在之前这篇文章的基础上进行稍加修改完成的,因而其绝大部分代码与上面的是一样的,而其不同之处在于,其请求数据的数据源不是来源于json文件,而是来自于后台的数据.此处的后台服务器中的数据由JSON Server所提供. 注意事项 json的数据结构 这是之前所请求的json数据: { "status":0 ,"message":[ { "id":1 ,"name":"张三" } ,{ "i

  • vue请求服务器数据后绑定不上的解决方法

    后台返回的数据,json类型 {"success":1,"tagList":[{"Id":1,"name":"林俊杰"},{"Id":2,"name":"MV"},{"Id":3,"name":"三次元"},{"Id":4,"name":"

  • Vue.js 使用v-cloak后仍显示变量的解决方法

    Vue.js 使用v-cloak后仍显示变量的解决方法

    Vue.js 使用v-cloak后仍显示变量的解决方法 v-cloak   这个指令是防止页面加载时出现 vuejs 的变量名而设计的,但有时候添加了这个指令仍会显示变量,这是怎么回事呢?. v-cloak 用法: HTML代码: <div v-cloak> {{ message }} </div> CSS代码: [v-cloak] { display: none; } 这样直至div内变量编译完毕后才会显示. 但有时添加完毕后仍有部分变量会显示,这是怎么回事呢?通过控制台查看,原

  • 阿里云LNMP 云服务器重启后网站打不开解决方法

    今天升级了一下系统架构,把MySQL升级到5.5.30,Nginx升级到1.4.1,php升级到5.5.25,但是升级之后服务器挂掉了,于是我就用了回滚快照,让系统恢复到原来的状态(阿里云的回滚快照功能需要重启服务器),服务器回滚之后,数据都在,但是就是无法提供web服务,尝试了 iptables -F清除防火墙规则,但是网站仍旧打不开.通过ps -aux命令发现nginx没有启动,于是执行了 复制代码 代码如下: /usr/local/nginx/sbin/nginx 之后,服务器web服务果

  • vue 请求后端数据的示例代码

    vue 请求后端数据的示例代码

    在vue中,我们如何通过请求接口来访问后端的数据呢?在这里简单总结了一个小示例: 主要问题:如果不封装的话,在每次请求的时候都要书写一遍下面的代码,造成代码冗余. 1.在src目录下创建一个utils文件夹,然后在里面创建一个js文件.这里我创建了一个request.js文件. /*引入axios*/ import axios from 'axios' const request = axios.create({ baseURL: 'http://localhost:8280/user', //

  • 全面解析vue中的数据双向绑定

    1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的getter,和setter.这也正是Vue不兼容IE8以下的原因. 2.Object.defineProerty(); var obj = {}; Object.defineProperty(obj,"hello",{ enumerable: true, //表示这个属性能够通过 for -- in 循环 (是否可枚举); configurable

  • android异步请求服务器数据示例

    1.在android4.0以后的版本,主线程(UI线程)不在支持网络请求,原因大概是影响主线程,速度太慢,容易卡机,所以需要开启新的线程请求数据: 复制代码 代码如下: thread1 = new Thread(){@Overridepublic void run() {  try {    URL url = new URL(WebUrlManager.CARSEVER_GetCarsServlet);    HttpURLConnection conn = (HttpURLConnectio

  • Vue数据双向绑定原理及简单实现方法

    Vue数据双向绑定原理及简单实现方法

    Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. 一.示例 var vm = new Vue({ data: { obj: { a: 1 } }, created: function () { console.log(this.obj); } }); 二.实现原理 vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的. 1)数据劫持.vue是通过Object.defineProperty()来实现数据劫持

  • Vue父子组件数据双向绑定（父传子、子传父）及ref、$refs、is、：is的使用与区别

    Vue父子组件数据双向绑定（父传子、子传父）及ref、$refs、is、：is的使用与区别

    既然有父传子那么肯定有子传父,有子传父肯定也有两者之间相互绑定 这里我们先看一下子传父的写法: 一.子传父:$emit() 看代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>子传父</title> <script src="https://cdn.jsdelivr.net/npm/vue"></sc

  • 微信小程序ajax实现请求服务器数据及模版遍历数据功能示例

    微信小程序ajax实现请求服务器数据及模版遍历数据功能示例

    本文实例讲述了微信小程序ajax实现请求服务器数据及模版遍历数据功能.分享给大家供大家参考,具体如下: 昨天下载了一个微信小程序的开发者工具,大概看了一下文档,简单的用他的方法实现了ajax请求. 微信小程序文档地址: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1474632113_xQVCl 头部标题和底部tab配置都在 app.json文件中,底部tab位最少两个,最多五个.下面是app.json文件代码和相关注释 { &qu

  • Vue实现渲染数据后控制滚动条位置(推荐)

    需求场景如下: 实现了消息发送,如果容器内消息过多,会出现滚动条,最新的消息位于最底部,不能及时出现在可视区域内,此时就需要在渲染列表后,将滚动条的位置定位到最底部.先来看看最终实现的效果 实现思路 渲染完数据后,通过refs对象获取消息容器的实际高度 将滚动条的设置到最底部 实现过程 sendMessage: function (event) { // 数据渲染 this.senderMessageList.push(thisSenderMessageObj); // 改变滚动条位置 this

随机推荐