精华内容
下载资源
问答
  • vue数据更新的原因(vue中数据更改了,但是视图没有更新) 参考链接 templete: <div id="app"> <h2>{{dataObj.text}}</h2>...

    vue数据不更新的原因(vue中数据更改了,但是视图没有更新)

    参考链接

    templete:

    <div id="app">
            <h2>{{dataObj.text}}</h2>
    </div>
    

    js:

    new Vue({
                el: '#app',
                data: {
                    dataObj: {}
                },
                ready: function () {
                    var self = this;
    
                    /**
                     * 异步请求模拟
                     */
                    setTimeout(function () {
                        self.dataObj = {};//真正实现数据更新的是这行代码
                        self.dataObj['text'] = 'new text';
                    }, 3000);
                }
    })
    

    上面的代码非常简单,我们都知道vue中在data里面声明的数据才具有响应式的特性,所以我们一开始在data中声明了一个dataObj空对象,然后在异步请求中执行了两行代码,如下:

    self.dataObj = {};
    self.dataObj['text'] = 'new text';
    

    解决办法: 首先清空原始数据,然后添加一个text属性并赋值。然后数据和模版都更新里。

    其中.text属性不具有响应式,但是数据更新了。原因:

    vue的dom更新是异步的,即当setter操作发生后,指令并不会立马更新,指令的更新操作会有一个延迟,当指令更新真正执行的时候,此时.text属性已经赋值,所以指令更新模板时得到的是新值。
    具体流程如下:

    • self.dataObj = {};发生setter操作
    • vue监测到setter操作,通知相关指令执行更新操作
    • self.dataObj[‘text’] = ‘new text’;赋值语句
    • 指令更新开始执行

    所以真正的触发更新操作是self.dataObj = {};这一句引起的,所以单看上述例子,具有响应式特性的数据只有dataObj这一层,它的子属性是不具备的。

    数组更新检测

    Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:

    push()
    pop()
    shift()
    unshift()
    splice()
    sort()
    reverse()
    

    注意事项

    由于 JavaScript 的限制,Vue 不能检测以下变动的数组:

    当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
    当你修改数组的长度时,例如:vm.items.length = newLength
    举个例子:

    var vm = new Vue({
      data: {
        items: ['a', 'b', 'c']
      }
    })
    vm.items[1] = 'x' // 不是响应性的
    vm.items.length = 2 // 不是响应性的
    

    为了解决第一类问题,以下两种方式都可以实现和vm.items[indexOfItem] = newValue相同的效果,同时也将触发状态更新:

    // Vue.set
    Vue.set(vm.items, indexOfItem, newValue)
    
    // Array.prototype.splice
    vm.items.splice(indexOfItem, 1, newValue)
    

    你也可以使用 vm.$set 实例方法,该方法是全局方法 Vue.set 的一个别名:

    vm.$set(vm.items, indexOfItem, newValue)
    

    为了解决第二类问题,你可以使用 splice:

    vm.items.splice(newLength)
    

    对象更改检测注意事项

    还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除:

    var vm = new Vue({
      data: {
        a: 1
      }
    })
    // `vm.a` 现在是响应式的
    
    vm.b = 2
    // `vm.b` 不是响应式的
    

    对于已经创建的实例,Vue 不能动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, key, value)方法向嵌套对象添加响应式属性。例如,对于:

    var vm = new Vue({
      data: {
        userProfile: {
          name: 'Anika'
        }
      }
    })
    

    你可以添加一个新的 age 属性到嵌套的 userProfile 对象:

    Vue.set(vm.userProfile, 'age', 27)
    

    你还可以使用 vm.$set 实例方法,它只是全局 Vue.set 的别名:

    vm.$set(vm.userProfile, 'age', 27)
    

    有时你可能需要为已有对象赋予多个新属性,比如使用 Object.assign() 或 _.extend()。在这种情况下,你应该用两个对象的属性创建一个新的对象。所以,如果你想添加新的响应式属性,不要像这样:

    Object.assign(vm.userProfile, {
      age: 27,
      favoriteColor: 'Vue Green'
    })
    

    你应该这样做:

    vm.userProfile = Object.assign({}, vm.userProfile, {
      age: 27,
      favoriteColor: 'Vue Green'
    })
    
    展开全文
  • 解决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数据更新

    千次阅读 2018-11-19 19:34:54
    Vue的数组更新 数组更新监测 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下: push() pop() shift() unshift() splice() sort() reverse() 在此我有个例子: 这是HTML页面 &...

    Vue的数组更新

    数组更新监测

    Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:

    • push()
    • pop()
    • shift()
    • unshift()
    • splice()
    • sort()
    • reverse()

    在此我有个例子:

    这是HTML页面
    <ul id="postList">
    	<li v-for="item in items">
    		<!-- 单个模块 -->
    		<div class="postlist">
    		</div>
    	</li>
    </ul>
    
    这是javascript代码–通过JQ ajax 提交获取数据
    	var vm=new Vue({
    		el:'#postList',
    		data:{
    			items:[]
    		}
    	})
    
    	function getPostList(){
    			$.ajax({
    				url:'postList.php',
    				type: 'post',
    				dataType: 'json',
    				data: {
                        method:'list'
    				},
    				success: function(data){
    					// 循环遍历
    					for(let index in data) {
    						Vue.set(vm.items, index, data[index]);
    					};
    				},
    				error: function(data){
    					console.log('error');
    				}
    			 })
    	}
    
    这里再次发送数据
        // 搜索
        function searchPostList(){
    
            var SearchVal=$('input[name=Search]').val();
    		if(SearchVal!=""){
                $.ajax({
                    url:'postList.php',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        method:'search',
                        SearchVal:SearchVal
                    },
                    success: function(data){
                        console.log('data'+data);
    					// 清空一次数组
    					vm.items=[];
                        // 循环遍历新数组
                        for(let index in data) {
    						vm.items.push(data[index]); 
                        };
    
                        // vm.$forceUpdate();
                        console.log('item'+vm.items);
                    },
                    error: function(data){
                        console.log(data);
                    }
                 })
    		}
    		else{
    			getPostList();
    		}
        }
    

    这儿清空了一次数组元素

    // 清空一次数组
    vm.items=[];
    

    用Push()更新数组元素 可以直接更新视图

    vm.items.push(data[index]); 
    

    这儿是图片效果

    在这里插入图片描述

    点击搜索,搜索 “”关键字
    在这里插入图片描述

    注:

    Vue动态改变数据,必须是响应式,不然不可以实时更新数组视图
    欢迎访问本人博客

    展开全文
  • Vue更改数据页面不同步更新

    千次阅读 2019-11-03 19:25:11
    Vue更改数据页面不同步更新 在请求数据并写入页面后,需要更改其中一些属性值,但是更改的时候发现页面上并没有同步更新,使用vue的devtools工具进行手动测试也是不更新。 官网上说需要使用vue,set()进行更新,于是...

    Vue更改数据页面不同步更新

    在请求数据并写入页面后,需要更改其中一些属性值,但是更改的时候发现页面上并没有同步更新,使用vue的devtools工具进行手动测试也是不更新。

    官网上说需要使用vue.set()进行更新,于是使用vue.$set()进行更改数据,但是发现还是不行。

    于是搞了半天,发现只有我要改的这个属性值不能同步更新,别的值就能,数据已经改成功了,页面就是没有更新。更奇怪的是,发现我先更新要改的那个值,然后再更新一个其他的值,页面就同步了。

    所以,目前的办法是,使用vue.$set()来更新两个值,一个是要更新的值,另一个可以设置一个其他的值,这样就能使得这两个值都刷新。

    展开全文
  • vue 异步数据更新问题

    千次阅读 2019-01-16 18:41:02
    记录一下出现的问题, 数据翻倍 这是复现问题的代码 data() { return { space: "", allresult: [] }; }, methods: { getmessage() { this.allresult = []; axios .get( "htt...
  • 但是Dom显示的内容一直都不更新,其中之前v-lazy懒加载的图片换成了:src,发现图片是可以正常切换,但是别的数据都没变,试了网上this.set、或者强制更新this.set、或者强制更新this.set、或者强制更新this.force...
  • vue 请求数据方式

    千次阅读 2019-05-20 22:15:46
    vue 请求数据方式 Vue 请求数据方式有:vue-resource、axios、fetchJsonp三种。其中,vue-resource 是 Vue官方提供的插件,axios 与 fetchJsonp 是第三方插件。 一、vue-resource 请求数据 npm 安装 vue-resource ...
  • 官方文档有更详细的解释以及代码: ... 声明:  仅此记录实践当中出现的问题及解决办法,有许多错误,望能得到大家的指正!!! 不胜感激 。...!...Vue部分代码:list为渲染到页面的数据 var menuList = new Vue...
  • Vue修改更新data数据

    千次阅读 2019-09-09 08:26:03
    // 现在已经存在一个声明过的Vue变量vBar var vBar = new Vue({ el:"#myModal", data:{ xq:'' } ...
  • 1.问题描述:在echarts弹框中嵌入echarts,在页面数据改变时,echarts视图不更新;...参考了一下网上的一些资料,发现可以用vue中的watch()函数来监听数据的更新,一旦数据更新了,那么就在watch()函数中调用dra...
  • Vue数据渲染与更新问题

    千次阅读 2018-08-29 10:38:46
    问题描述:  在Vue使用过程中,通过list列表渲染数据,然后通过JS代码动态改变的标签值,在push()一... 使用Vue做后台数据渲染时,通过JS代码改变标签值,并不会同步更新vue绑定的对象(手动在标签中输入内容会同...
  • 我们在项目中经常会遇到数据更新了,但是视图并没有发生改变。尤其是引用类型的数据。 解决方案 Vue.set( target, propertyName/index, value ) .sync修饰符
  • vue改变数据DOM不更新的解决办法

    千次阅读 2020-08-18 11:59:25
    理解:nextTick(),是将回调函数延迟在下一次dom更新数据后调用,简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数. 使用场景: 1.1、Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue....
  • vue数据改变 界面不更新问题

    万次阅读 2019-07-23 11:03:54
    vue双向绑定问题中,不能实现及时更新的问题: 不在data中显式声明的对象不能及时更新 在form中,经过v-model的变量 或 在其他html标签中 使用v-bind:方法的变量才能及时更新 vue不能检测到对象属性的增加,修改...
  • 在一个组件实例中,只有在data里初始化的数据才是响应的,Vue不能检测到对象属性的添加或删除,没有在data里声明的属性不是响应的。 Vue不允许在已经创建的实例上动态添加根级响应式属性,但是可以使用$set方法将...
  • 1.data中有对象obj :{name:'远航',age:18} 2.此时新增phone this.obj.phone = '123456'  再次更新 用this.obj.phone = '654321' 视图...3.添加完成以后数据更新,视图未更新,   解决问题:因为obj中没有p...
  • 想必大家都遇到了在vue项目中更新了data数据后视图并不会更新的问题。 我遇到这个主要是在一个weex的UI组件库项目中,因为组件库一部分组件是使用vue在weex下实现的,一部分组件是原生实现的,即不需要导入直接传值...
  • 我们在开发过程中会碰到数据更新,但是视图并未改变的情况,情况如下: 1.数组数据改变时,使用某些方法操作数组,数据变了,但是视图并没改变。(页面没有监测到数据改变) 解决办法: 使用下面这些方法操作数组,...
  • Vue数据更新后页面不更新不刷新

    千次阅读 2019-09-26 16:48:37
    在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的。 根据官方文档定义:如果在...
  • 1:如果组件绑定的是数组,可在组件根元素绑定v-if为数组长度,在数据请求接口中,先将数组置为[],数据请求成功后,再给数组重新赋值,这样就可以在数据更新时使整个组件更新状态 2:如果组件绑定的是数组,可以尝试使用可以...
  • vue刷新数据

    千次阅读 2017-04-24 14:34:59
    var c = new Vue({   el: "#cartoon",   data: data,   methods: {   //刷新数据   refresh: function(){    //加载数据 mui.ajax(getCartoonTurnReq, { dataType: 'json
  • 一、在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去; 向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新...
  • Vue2 全局-Vue.set更新vue数据

    千次阅读 2017-09-03 16:06:43
    代码: {{ name }} --- {{ price }} --- {{ count }} 减少 function reduceOne() { Vue.set(cartData, 'count', cartData.count-1); } var cartData={ name:"T-shirt
  • vue2.0数据更新,重新渲染视图的三种方法

    万次阅读 多人点赞 2018-04-30 10:17:23
    问题:利用v-for渲染数据,通过方法改变了数据,视图没有更新。原因:由于javascript的限制,Vue不能检测到以下变动的数组(如:objArr):1.通过索引直接设置数组的某个值,this.objArr[index] = newValue;2.通过...
  • vue 数据更新实时刷新

    万次阅读 2019-07-11 14:08:29
    // 这是获取数据的函数   getData() {   .....   }   // 这是一个定时器   timer() {   return setTimeout(()=>{   this .getData()   },5000)  ...
  • vue数据异步更新($nextTick)的问题

    千次阅读 2019-06-19 16:04:46
    vue数据向视图上进行更新的操作,是异步的 异步的就意味着,在代码中更改完数据之后,直接去访问页面中的元素中的内容,还是老数据 那么如何去解决这个问题呢? vue中提供了$nextTick方法: <!DOCTYPE ...
  • vue 数据更新不渲染

    千次阅读 2018-11-08 18:08:35
     在使用vue element的table表格时,想对table的cell进行编辑。  点击修改实现如下功能: 代码: &lt;el-table-column label="名称"&gt; &lt;template slot-scope="scope&...
  • vue延迟渲染 数据更新 分页没更新

    千次阅读 2019-09-05 15:33:25
    vue有时候会渲染的速度比异步请求的速度要快,所以导致了渲染的数据没有更新上,第二张图,有data的total表示的是自己设置总数量110条,而实际上应该是请求后得到数据应该是474条,所以分页总数量应该是48不是11. ...
  • Vue 超大数据列表 vue-recyclerview

    千次阅读 2018-07-26 13:18:09
    vue-recyclerview 详细介绍 ...vue-recyclerview 是一个 Vue 超大数据列表解决方案 ,动态布局 + 自动回收解决移动端中大数据量列表的性能瓶颈。 在线演示:https://hilongjw.github.io/vue-recyclerview/...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 358,405
精华内容 143,362
关键字:

vue怎么更新数据

vue 订阅