精华内容
下载资源
问答
  • vue删除数组对象不能实时更新
    千次阅读
    2019-09-17 15:30:44

    <i class="el-icon-close"

                           @click="deleteItem(index, ind)"></i>

     

    // 删除选中的数据

        deleteItem (index, ind) {

          console.log(index, ind)

          this.cList.data[index].quData.splice(ind, 1)

          this.cList = Object.assign({}, this.cList)

          console.log(this.charpterList)

        },

    使用 Object.assign({}, this.cList)直接赋值的原理监听

    更多相关内容
  • vue父组件向子组件传对象不实时更新解决

    万次阅读 多人点赞 2019-06-21 13:59:24
    在子组件中监听你要的数据,当然别监听对象,监听了一定好使。亲测不好使,测过好使的,可以给我留言。 data:function(){ return { title:"", content:"", btn:"" } }, methods:{ change...

    思路1:就是让利用v-if的重新渲染机制

    1.首先考虑的就是手动刷了,给组件加个v-if=”someShow“;

    2.在父组件添加如下方法;

    //  这是组件上写法 :<my-component v-if="someShow"></my-component>
    
    // 下边写在父组件的methods里
    refesh:function(){
    	this.someShow=false;
    	var _this=this;
    	this.$nextTick(function(){
    		_this.someShow = true;
    	})
      
    }
    // $nextTick
    // $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM  这样重新渲染就会是最新数据了

    这样就完美解决了不更新的问题。、

    思路2:利用watch监听

    在子组件中监听你要的数据,当然别监听对象,监听了不一定好使。亲测不好使,测过好使的,可以给我留言。

        data:function(){
    		return {
    			title:"",
    			content:"",
    			btn:""
    		}
    	},   
         methods:{
    		changeTitle:function(){
    			this.title=this.listTitle;
                // 这里的每次变化了就复制给组件上的变量,视图也就更改了			
    		},
    		changeList:function(){
    			this.content=this.listList;
    		},
    		changeBtn:function(){
    			this.btn=this.listBtn;
    
    		}
    	},
    	watch:{
    		listTitle:"changeTitle",
    		listList:"changeList",
    		listBtn:"changeBtn"
    		// 冒号前边这个就是从父组件传过来的,后边的就是变化了的监听函数
    	}

     

    展开全文
  • vue中,改变某个对象的值时(如数组中的某一项或者对象的某个属性),vue会触发dom更新,这时就需要我们自己手动来操作。 方法一:强制刷新 // 此行为会重新渲染整个dom,除数据层次太多外,建议使用 ...

    在vue中,改变某个对象的值时(如数组中的某一项或者对象的某个属性),vue并不会触发dom更新,这时就需要我们自己手动来操作。

    方法一:强制刷新

    // 此行为会重新渲染整个dom,除数据层次太多外,不建议使用
    this.$forceUpdate();

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

    data() {
        // 数组
        array: [1, 2, 3, 4];
        // 对象
        obj: {name: "test"},
    }
    ......
    
    // 这种方式赋值并不会触发dom并自动更新
    // this.array[0] = 5;
    
    // 改为此种方式赋值则会触发更新,
    // 参数1:要修改的数组,    参数2:要修改的数组的索引,    参数3:修改后的值
    this.$set(this.array, 0, 5);
    
    
    
    
    // this.obj.name = "张三";
    
    // 参数1:要修改的对象,    参数2:要修改的对象的属性名,    参数3:修改后的值
    this.$set(this.obj, "name", "张三");

     

    以下是出现这种情况的原因:

    出现这种情况的原因是由于vue2.x的基本原理决定的。vue的基本原理是通过Object.defineProperty重写变量的get和set方法来实现监听变量的改变和通知页面重新渲染的。

    这里就要了解一下Object.defineProperty,以下直接拷贝的官网文档。

    Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
    
    Object.defineProperty(obj, prop, descriptor)
    
    obj: 要定义属性的对象。
    
    prop: 要定义或修改的属性的名称或 Symbol 。
    
    descriptor: 要定义或修改的属性描述符。

    假如你在vue中定义了一个对象:objTest: {name: "test"},

    vue在created之前会重写objTest对象中name的get和set:

    // 先把原来的obj深拷贝一份
    var objCopy = JSON.parse(JSON.stringfy(this.obj));
    var newObjTest = Object.defineProperty(objTest, 'name', {
            get: function () {
                // 返回objCopy的name,如果返回obj.name会死循环
                return objCopy.name;
            },
            set: function (newValue) {
                // 把objCopy的name属性重新赋值
                objCopy.name = newValue;
                // 去通知页面obj的name的值变了,该渲染页面了
                ......
            }
        })

    从上面的例子可以看出,当我们给obj.name属性赋值的时候,会走我们重新定义的set方法,并让页面重新渲染,但是为什么有时候却不行呢?这就是Object.defineProperty的不足之处了,因为在vue中它只会遍历已有的对象及其属性,未定义的属性vue是不会重写get和set的方法的。

    所以如果你在data中没有定义某个对象属性,而在后续的操作中添加了新的属性时,页面是不会重新渲染的。

    展开全文
  • 一、在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并会自动更新到视图上去; 向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新...

    一、在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去;

    向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 ,需要用vue内置的方法

    二、Vue.set() 响应式新增与修改数据
    此时我们需要知道Vue.set()需要哪些参数,官方API:https://cn.vuejs.org/v2/api/#Vue-set

    调用方法:Vue.set( target, key, value )  或者  this.$set(target, key, value);

    target:要更改的数据源(可以是对象或者数组)

    key:要更改的具体数据

    value :重新赋的值,

    调用:this.$set(target, key, value);

     

    欢迎关注我的个人技术公众号!javascript艺术

    展开全文
  • vue对象属性改变视图不更新问题

    万次阅读 2017-07-03 15:17:12
    但当数据为对象,我们增加或删除对象属性值时,视图并触发更新,如何解决这个问题呢?实例代码如下: let vm = new Vue{ data: { obj: { k: 'v' } } } 有三种解决方案: 方案一:利用Vue.set(object,key,val...
  • Vue 对象和数据的强制更新

    千次阅读 2020-01-09 19:11:06
    数组更新 以下支持自动更新 push() //向后添加 pop() //删除最后一个 shift() //删除第一个 unshift() //向第一个添加元素 splice() //向指定位置添加/删除元素 sort() //用原地算法对数组的元素进行排序 reverse()...
  • 今天碰到了一个ue中对象属性改变视图不更新的问题,一开始还一直以为是vue中@focus和@blur的问题,上午查资料,各种折腾,还是没有解决。最后请教了大神,上来就直接给我推翻了我的判断。。。然后直接让我百度了...
  • activated():在vue对象存活的情况下,进入当前存在activated()函数的页面时,一进入页面就触发;可用于初始化页面数据等。 (2)步骤 本例中使用的跳转为:返回上一页 为了刷新页面状态(比如当前在表单的...
  • vue对象改变,页面并不更新

    千次阅读 2019-07-10 09:53:11
    如下代码,给 student对象新增 age 属性 data () { return { test: { name: '', age: '' } } } 二、 众所周知,直接给test赋值操作,虽然可以新增属性,但是不会触发视图更新 mounted () { this.tes...
  • Vue更新数组和对象的方法

    千次阅读 2020-09-26 22:44:14
    由于 JavaScript 的限制,利用索引直接修改数组元素时,Vue 不能检测数组的变动: 正确的方法: Vue.set(vm.items, indexOfItem, newValue) vm.items.splice(indexOfItem, 1, newValue) vm.$set(vm.items, indexOf...
  • vue中使用sessionStorage存储数据,当数据变化时页面及时更新数据,需F5刷新页面才变化 其他页面存储,另一父组件页面获取,子组件渲染,刚开始一直以为是父子组件传递数据这里有bug 一、首先在main.js中声明...
  • 用下面handleChoosed方法里面的操作,可以实现对choosed_grade对象的操作 ,但是并没有更新渲染到视图上面。如下: <div class="btn" @click="handleChoosed">选好了</div> data () { return { ...
  • 需求:点击按钮,向一个对象新增name属性,希望页面也显示出来新增的name 代码: <div id="app"> {{obj}} <div @click="add">新增name属性</div> </div> <script> new Vue({...
  • vue路由传参 params传参不能对象

    千次阅读 2019-10-30 16:54:00
    不能对象,传对象的时候,刷新完数据会丢失 传递的是一个对象 但是: 跳转以后,刷新页面,数据会丢失,所以说不能对象,会有问题
  • 最近因为工作需求原因一直使用VUE框架,作为时下最热门的**渐进式框架**,开发起来确实非常给力~ 当然一个好的工具也可能完全对你百依百顺,最近在工作中就遇到了一个问题,经过一下午的奋战终于搞定了,秉承着本...
  • VUE对象的动态绑定

    千次阅读 2019-08-29 22:34:35
    VUE对象的动态绑定vue检测对象的删除和添加动态添加对象属性动态添加对象属性的双向绑定的实现 vue检测对象的删除和添加 vue不能检测到对象的删除和添加,因为vue初始化实例的时候对属性进行一个get和set的过程...
  • VUE项目中,有时候进行数组对象赋值时,不能实时回显到页面中,但是打印又有新的数据在里面。 具体实现 场景一:对象赋值新的属性时,页面不能回显。 原因:该对象本身是没有这个属性的。 解决方案: this.$set(obj...
  • VUE对象属性改变视图未更新问题

    千次阅读 2018-08-23 16:05:40
    VUE对象属性改变视图未更新问题 VUE的响应式使得赋值变得非常简单,但最近却碰到了改变对象属性视图没有更新的问题,代码如下: // 添加/修改属性 this.obj.pro = ‘pro1’; // obj在data中有定义 // 删除属性 ...
  • 当我们给data里边声明或者已经赋值过的对象或者数组,添加新的属性时,如果更新此属性的值是不会动态更新视图的。 $set Vue.set( target, key, value ) 复制代码参数: {Object | Array} target {string | number} ...
  • vue改变对象的值视图不更新的问题

    千次阅读 2018-06-08 10:26:39
    一个分类的列表,重命名功能,需要由文本状态变成编辑态,用isEdit属性来控制,直接写改变对象里isEdit的属性发现视图不更新,查看官方文档后了解到:受到javascript的限制,Vue不能检测到对象属性的添加或删除。...
  • vue修改data中的对象更新不到页面上去? Object.assign浅拷贝 然后强制刷新视图. this.detail = Object.assign({}, this.detail, i); this.$forceUpdate();
  • 操作父组件修改每个子组件的数据,没能实时更新子组件 1.未解决前的写法 父组件中 <template> <div class="process-parent"> <div class="process-style" v-for="(item, index) in data" :key=...
  • vue 遍历对象

    千次阅读 2022-01-05 20:41:35
    可以使用v-for 遍历对象,在M层定义普通对象, 举例:data 内容 data:{ obj:{ id:1, name:'名称', des:'des内容', content:'具体内容' } } 这个时候,用 v-for 遍历可以遍历对象。 <div v-for=...
  • Vue 列表渲染-问题 : Vue.js 不能检测到下面数组变化: 直接用索引设置元素,如 vm.items[0] = {}; 修改数据的长度,如 vm.items.length = 0。 由于数组元素是一个复杂的对象,而我只是想修改一个属性的值,难道要...
  • Vue数据更新视图不更新的几种解决方案

    万次阅读 多人点赞 2019-10-16 20:56:22
    在一个组件实例中,只有在data里初始化的数据才是响应的,Vue不能检测到对象属性的添加或删除,没有在data里声明的属性不是响应的。 Vue不允许在已经创建的实例上动态添加根级响应式属性,但是可以使用$set方法将...
  • 数组和对象更新vue

    千次阅读 2018-10-25 09:31:29
    下面有一个这样的问题,比如说 ...这样的话ng是可以的,但是vue就起到作用,那该怎么办呢?   数组检测更细变异的方法   push() pop() shift() unshift() splice() sort() revers...
  • this.$set(this.list[index], 'show', value) 注意: 这样赋值需要在第一次更改(除声明外)this.list[index].show的时候就用$set,若是之前就直接赋值,后面再用$set不会生效。...
  • <!... <...Vue 测试实例-数组更新 </title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> {{sites}} <button @
  • vue3 setup中使用对象数组 const state = reactive<DataProps>({ fileList:[] }) 如果更新数组中的对象属性会发现数据不会更新,比如 const newImgFile: ImgFile = { path:result, status: 'selected', ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 287,195
精华内容 114,878
关键字:

vue对象不能实时更新