vue给对象(数组)添加属性的时候，无法达到响应式的效果，页面无法即时更新

当我们给对象或者数组添加一个属性的时候，会发现通过打印，可以在控制台看见数据已经更新，但是页面却没有成功渲染上。

<template><div class="main-layout"><div v-for="(item, index) in data" :key="index">{{ item.name }}, {{ item.age }}</div><button @click="updateName">修改土豆的名字</button></div>
</template><script>
export default {data () {return {data: [{ name: '土豆', age: 1 },{ name: '马铃薯', age: 18 }]}},methods: {updateName () {const newName = { name: '小红', age: 1 }this.data[0] = newNameconsole.log(this.data[0])}}
}
</script>

解决方法使用this.$set() / Vue.set()

调用方法：this.$set( target, key, value )

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

key：要更改的具体数据

value ：重新赋的值

 updateName () {const newName = { name: '小红', age: 1 }// this.data[0] = newNamethis.$set(this.data, 0, newName)console.log(this.data[0])}

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

其实可以很明显的可以看到控制台打印出来的数据，就可以判断添加的属性是不是响应式

vue给对象(数组)添加属性的时候，无法达到响应式的效果，页面无法即时更新相关推荐

vue 存储对象不要监听_Vue源码解析----响应式原理
从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新 ...
js给数组添加数据的方式/js 向数组对象中添加属性和属性值
参考:https://www.cnblogs.com/ayaa/p/14732349.html js给数组添加数据的方式有以下几种: 直接利用数组下标赋值来增加(数组的下标起始值是0) 例,先存在一个 ...
js给对象动态添加属性的2种方法
js给对象动态添加属性的2种方法需求: 要给每个课程添加一个判断鼠标是否hover 分析: 因为数据是动态渲染的,所以需要动态的给他添加一个flag标记,就得在数据渲染之前先拿到,然后再添加一个自己 ...
vue给html动态添加属性,Vue中怎么动态添加类名？
能够向组件添加动态类名是非常强大的功能.它使我们可以更轻松地编写自定义主题,根据组件的状态添加类,还可以编写依赖于样式的组件的不同变体. 添加动态类名与在组件中添加 prop :class=" ...
vue3中对对象增添属性也会加入到响应式
我们先来看看看vue2版本: vue2版本中对一个对象增添属性不会有响应式,需要通过set方法来进行控制,比如一下点击点击岁数按钮时,岁数不会显示到页面中去. 再来看看vue3版本: 这时点击 ...
vue中给window对象上添加属性的方法
web页面通讯方法.window.open打开新页面,父子页面通讯的方法最直接的就是获取对方的window对象进行调用父子各自得属性及方法. 下面是整理的几种通讯得方法仅供参考第一种 // 第一种方 ...
Vue观察对象的子属性变化，wacth的deep使用
我们都已经知道,如何观察一个属性值的变化,然后做相应的操作.比如我有一个属性name,我希望在name改变的时候,弹出消息框. 代码如下: <template><div id=&qu ...
vue 往对象中添加键值对_【Vue】Vue学习之混入
今天学习了Vue中的"混入"知识点,写篇文章用自己的语言来向自己解释它,如有不足还望指点. 混入(mixins): 混入提供了一种非常灵活的方式,来分发Vue组件中的可复用功能 - ...
python-往对象中添加属性值
class Cat:pass 对象.属性 t = Cat() t.name = "张三" print(t.dict) 反射添加 setattr(t, "age" ...

vue给对象(数组)添加属性的时候，无法达到响应式的效果，页面无法即时更新

解决方法使用this.$set() / Vue.set()

vue给对象(数组)添加属性的时候，无法达到响应式的效果，页面无法即时更新相关推荐

最新文章

热门文章

vue给对象(数组)添加属性的时候，无法达到响应式的效果，页面无法即时更新

解决方法 使用this.$set() / Vue.set()

vue给对象(数组)添加属性的时候，无法达到响应式的效果，页面无法即时更新相关推荐

最新文章

热门文章

解决方法使用this.$set() / Vue.set()