精华内容
下载资源
问答
  • vue ajax请求数据不更新 解决方案

    千次阅读 2017-10-20 15:51:48
    这个问题 卡我好久, 找到方法了,分享出来吧 举个简单例子 ... m.ajax();...好,点点赞看你了,或者 可以加入 我的 群153181864 前端交流群  ,绝对原创,转载请附上 本微博链接。

    这个问题  卡我好久,

    找到方法了,分享出来吧

    举个简单例子

    <template>
    	<div>
        	{{a}}
        </div>
    </template>
    
    <script>
    	export default {  
    		data:function(){
    			var m=this;
    			return {
    				a:1
    			}
    		},
    		mounted:function(){
    			var m=this;
    			m.ajax();
    		},
    		methods:{
    			ajax:function(){
                               var m=this
    				$.ajax({
    					type:"get",
    					dataType:"json",
    					timeout:"30000",
    					url:"",
    					data: {
    						id:1	
    					},
    					success:function(res){
    						var b=2;
    						m.a=b//错误的
    						m.$set(m.a, b)
    						
    					}
    				})
    			}
    	    },
    	}
    </script>
    
    <style>
    </style>


    恩重点 在  m.$set   这里m就是this了  


    好,点不点赞看你了,或者 可以加入 我的 群153181864  前端交流群 ,绝对原创,转载请附上 本微博链接。

    展开全文
  • $.ajax vue组件数据

    千次阅读 2016-10-10 00:38:17
    因为ajax是异步,所以很难直接更新vue实例中的data数据就是很难更新this中的data数据可以曲线救国 在异步前 把this复制给self或其他值就可以了 <div class="

    因为ajax是异步,所以很难直接更新vue实例中的data数据

    就是很难更新this中的data数据

    可以曲线救国
    在异步前 把this复制给self或其他值就可以了

    <template>
        <div class="container-fuild">
            <div class="row" v-for="school in list">
                <div class="col-xs-4">{{school.id}}</div>
            </div>
        </div>
    
    </template>
    <style>
      @import "css/bootstrap.css";
    </style>
    <script>
        module.exports ={
            data:function () {
                return{
                    list:"",
                    ceshi:"ceshi"
                }
            },
            methods:{
              getlist:function () {
                  var data = new Object();
                  var self = this;
                  /*重点讲解*/
                  $.ajax({
                      url:"getlist",
                      data:data,
                      type:"post",
                      dataType:"json",
                      success:function (data) {
                          self.list = data;
                          console.log(data)
                          console.log(this.list)
                      },
                      error:function () {
    
                      }
                  })
              },
            },
            ready:function () {
                this.getlist();
            }
        }
    
    </script>
    
    展开全文
  • 主要介绍了Vue2.X 通过AJAX动态更新数据的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 今天小编小编就为大家分享一篇Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 解决Vue数据更新数据不渲染问题

    万次阅读 2018-08-30 15:20:45
    Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测:  push() pop() shift() unshift() splice() sort() reverse() vue2.0还增加个方法可以观测Vue.set(items, index...
    • Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测: 
      • push()
      • pop()
      • shift()
      • unshift()
      • splice()
      • sort()
      • reverse()
      • vue2.0还增加个方法可以观测Vue.set(items, indexOfItem, newValue)
      • filter(), concat(), slice() 。这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组
    • Vue 不能检测以下变动的数组: 
      • ① 当你利用索引直接设置一个项时,vm.items[indexOfItem] = newValue
      • ② 当你修改数组的长度时,例如: vm.items.length = newLength
    function getFoolTypeAllData(){
    	$.ajax({
    		url:projectName+"/fool/getFoolType",
    		type:"get",
    		success:function(data){
    			$.each(data,function(a,b){
    				  // this.foolType[a] ={id:b.id,type:b.type} //这样直接修改不能被vue监听到
    			          // Vue.set(this.foolType,a,{id:b.id,type:b.type}); //这样就能被vue监控到,更新视图  
    				 Vue.set(this.foolType,a,{id:b.id,type:b.type});
    			})
    		},error:function(){
    			layer.msg("服务器异常!获取菜品类型失败", {icon: 5});
    		}
    	})
    	
    }

    通过后台接口获取数据,封装到Vue的定义的变量foolType[]中,页面通过v-for循环渲染出数据,再也不会出现刷新几次没有数据的问题了

    展开全文
  • vue 使用ajax更新data数据

    千次阅读 2018-09-07 22:34:00
    $.ajax({ url:'/data', type:'get', data:{page:page}, success:function(page){ if(!vue){ console.log('创建一个新的vue'); vue=new Vue({ el:'#data', data:{ depts:page....
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <style>
    .pc{
    	width: 34px;
    	height: 34px;
    	cursor: pointer; 
    	border: 1px solid #e1e2e3;  
    	line-height: 34px;
    	text-align: center;
    	display: inline-block;
    }
    </style>
    <body>
    <div id="data">
    <table  border="1">
    	<tr>
    		<th>no</th>
    		<th>name</th>
    		<th>source</th>
    	</tr>
    	<tr v-for="(dept,key) in depts">
    		<td :no="dept.deptno">{{dept.deptno}}</td>
    		<td>{{dept.dname}}</td>
    		<td>{{dept.dbSource}}</td>
            <td>
              <span  v-if="key == 0">
                 <input type="radio" name="policyIndex" :value="key" checked="checked">
              </span>
              <span v-else>
                 <input type="radio" name="policyIndex" :value="key" />
              </span>
            </td>
    	</tr>
    </table>
    
    <div>
    	<span onclick="loadData(1)" class="pc">1</span>
    	<span onclick="loadData(2)" class="pc">2</span>
    	<span onclick="loadData(3)" class="pc">3</span>
    	<span onclick="loadData(4)" class="pc">4</span>
    </div>
    </div>
    <script src="/js/jquery.js"></script>
    <script src="/js/vue.js"></script>
    <script>
    var vue;
    $(function(){
    	loadData(1);
    })
    function loadData(page){
    	$.ajax({
    		url:'/data',
    		type:'get',
    		data:{page:page},
    		success:function(page){
    			if(!vue){
    				console.log('创建一个新的vue');
    				vue=new Vue({
    					el:'#data',
    					data:{
    						depts:page.list
    					}
    				})
    			}else{
    				console.log('利用了原来的vue');
    				vue.depts=page.list;
    			}
    				
    		}
    	})
    }
    	
    
    	
    </script>
    </body>
    </html>

     

    转载于:https://my.oschina.net/u/3574106/blog/1982800

    展开全文
  • 本篇文章主要介绍了详解vue 中使用 AJAX获取数据的方法,在VUE开发时,数据可以使用jquery和vue-resource来获取数据,有兴趣的可以了解一下。
  • 由于公司权限所致,能使用vue全家桶,但是又想使用vue,大家都知道,vue支持ajax的,那么如果我非要用vue去渲染ajax请求回来的数据怎么办呢? 以下是思路, 1、先创建vue实例vm,在methods里写一个loading...
  • 当父组件axjos获取数据,子组件使用props接收数据时,执行mounted的时候axjos还没有返回数据,而且mounted只执行一次,这时 props中接收的数据为空 解决方案:在对应组件中判断数据的长度 ...
  • 1. 引入jquery和vue.js 2. $(function(){ vm = new Vue({ el:'#lst', data:{ mcs : [] } }); getmc(); }); function getmc(tid){ $.get("xxxx.action", fun
  • 最近在搞毕业设计想趁机学学前端知识,于是就应用了目前比较流行的vue框架来进行数据显示,使用BootStrap进行简单的样式编写 1.第一步肯定是包的导入了 目前对node.js还不是很了解,所以包都是手动下载导入的,没有...
  • 在子组件中,watch监听props的动态值,设置deep的属性值为true(vue2官方文档中解释为:深度监听,每次属性值发生变化时,都会监听到)。在handler中执行子组件想处理数据的方法。 解决方案2 分析: 父子组件的...
  • 初学vue,在使用ajax访问后台时,数据不能正确的渲染到页面上,最初采用aysnc函数 await等待渲染 如: async getAllBook() { const response = await axios.post('Book'); this.tableData = response....
  • 本人对vue与后端数据交互不是很懂,搜索了很多关于vue与后端数据交互介绍,下面我来记录一下,有需要了解的朋友可参考。希望此文章对各位有所帮助。 必须引入一个库:vue-resource 1.获取普通文本数据 比如:a.txt: ...
  • vue ajax数据传递

    2018-11-27 11:47:55
    引入 ajax 在router里已经定义了id 点击不同的景点,进入不同详情页 看一下数据能否请求到 看到数据已经被显示出来呢 然后替换掉静态数据 然后子组件还要接收父组件的值 此时数据渲染没有问题 ...
  • 本篇文章主要介绍了浅谈Vue.js应用的四种AJAX请求数据模式,本文将详细介绍在Vue应用程序中实现AJAX的四个方法,有兴趣的可以了解一下
  • Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下
  • 当通过AJAX方式取回数据后,使用vue.js可以完美地按一定逻辑在页面上的展示数据,代码简单、优美、自然,而且便于与在用的页面框架集成,本文给大家介绍Vue.js展示AJAX数据简单示例
  • Vue数据更新

    千次阅读 2018-11-19 19:34:54
    Vue的数组更新 数组更新监测 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下: push() pop() shift() unshift() splice() sort() reverse() 在此我有个例子: 这是HTML页面 &...
  • 本篇文章主要介绍了详解使用Vue.Js结合Jquery Ajax加载数据的两种方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 今天小编就为大家分享一篇vue使用ajax获取后台数据进行显示的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 最近在搞毕业设计想趁机学学前端知识,于是就应用了目前比较流行的vue框架来进行数据显示,使用BootStrap进行简单的样式编写1.第一步肯定是包的导入了 目前对node.js还不是很了解,所以包都是手动下载导入的,没有...
  • vue数据更新视图渲染

    千次阅读 2019-03-30 16:04:32
    现在有这样一串数据(formData) 现在的需求是这串数据已经渲染完毕,但是我要往每列数据里面新增一个noWritedNum属性并赋值,因为这个属性的值在另外一个请求的结果中,这个请求需要formData中的id作为参数。我...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 41,983
精华内容 16,793
关键字:

ajaxvue数据不更新

vue 订阅