Vue中ajax返回的结果赋值

这是第二次在项目中遇到此问题,ajax请求成功后在success函数中为Vue实例data里的变量赋值,却失败了

new Vue({
    el:'#app',
    data:{
        msg:''
    },
    created:function(){
        $.ajax({
            url:'',
            data:'',
            dataType:'json',
            success:function(res){
                this.msg = res.data;
            }
        })
    }
})

原因在于在ajax的success函数中,this的指向不再是vue的实例
解决办法可以先把this保存起来

new Vue({
    el:'#app',
    data:{
        msg:''
    },
    created:function(){
        var that = this;
        $.ajax({
            url:'',
            data:'',
            dataType:'json',
            success:function(res){
                that.msg = res.data;
            }
        })
    }
})

参考资料

Vue中ajax赋值问题

原文地址:https://www.cnblogs.com/Grani/p/10486969.html

时间: 2024-10-28 10:02:58

Vue中ajax返回的结果赋值的相关文章

IE浏览器中 $.ajax返回uindefined 其他浏览器正常

怎么解决IE浏览器中ajax返回undefined问题_JavaScript教程_B5教程网 出现这样的问题,是因为文件保存编码和页面显示编码不一至造成的.各种浏览器,没有统一的规范,特别是IE,做浏览器兼容时,是比较郁闷的.下面模拟一下这个问题. 1,test.php采用gbk或者gb2312编码 <?php  header("content-Type: text/html; charset=utf8");//设置页面显示为utf8  echo "aaa";

thinkphp中AJAX返回ajaxReturn()方法分析

1 本文分析了thinkphp中AJAX返回ajaxReturn()方法.分享给大家供大家参考,具体如下: 2 系统支持任何的AJAX类库,Action类提供了ajaxReturn方法用于AJAX调用后返回数据给客户端.并且支持JSON.XML和EVAL三种方式给客户端接受数据,通过配置DEFAULT_AJAX_RETURN进行设置,默认配置采用JSON格式返回数据,在选择不同的AJAX类库的时候可以使用不同的方式返回数据. 3 要使用ThinkPHP的ajaxReturn方法返回数据的话,需要

ionic中将service中异步返回的数据赋值给controller的$scope

1.service中异步获取数据实例 angular.module('starter.services', []) .factory('Chats', function($http,$q) {//定义Chats的service return { all: function() {//all方法异步获取数据 var deferred=$q.defer(); //定义deferred var promise=deferred.promise;//定义promise $http.get('http:/

vue中ajax请求发送

示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> spa

【转】解决spring mvc 中ajax返回json乱码问题

转载自:http://my.oschina.net/u/140421/blog/176625 转载自:http://my.oschina.net/candon/blog/149073?fromerr=I9VBOy62 第一个转载: 在使用spring-mvc的mvc的时候既享受它带来的便捷,又头痛它的一些问题,比如经典的中文乱码问题.现在是用json作为客户端和服务端 的数据交换格式貌似很流行,但是在springmvc中有时候会因为我们的各种疏忽从而造成页面ajax请求到的相应数据,如果带有中文

vue 中 ajax请求封装以及使用方法

async/await 1)async/await场景 这是一个用同步的思维来解决异步问题的方案,当前端接口调用需要等到接口返回值以后渲染页面时. 2)名词解释 >async  async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行,             async 函数返回的是一个promise 对象. >await await的含义为等待.意思就是代码需要等待await后面的函数运

解决:Vue中给input框手动赋值,视图却不更新

如下示例: <a-form layout="vertical"> <a-row :gutter="16"> <a-col :span="24"> <a-form-item label="名称"> <a-input v-model="helloForm.name" placeholder="请输入名称"/> </a-form

在vue中后台返回的文本包含标签时候解析为html代码

1.数据格式: str=‘<p>11111</p>' 解析方式一: <p v-html="str">{{str}}</p> 解析方式二: <pre>{{str}}<pre> 如果需要换行,在相应样式表上加white-space: pre-line 原文地址:https://www.cnblogs.com/Ashley77/p/11332019.html

小笔记(一):ajax传递数组及将ajax返回数据赋值

当使用ajax传递数据时,有可能传递多个数据,这是使用以下方法传递数据就会显得数据过多且混杂 $.ajax({ type:'post', url:url, data:{data:data,content1:content1,content2:content2,content3:content3,...........}, success:function(data){ alert(data) } }); 这时我们就可以先在传递数据之前,将数据封装在数组中,但是要注意,定义数组的时候要用arr={