vue 使用 this.$set()
时间: 2023-10-12 15:17:07 浏览: 76
vue中 this.$set的用法详解
5星 · 资源好评率100%
在 Vue.js 中,如果您想要在对象或数组上动态添加属性或元素时,可能会遇到一些问题。这是因为 Vue.js 不能探测到对象或数组上的属性或元素的添加或删除操作,例如使用 `obj.newProp = 123` 或 `arr.push(456)`。为了解决这个问题,Vue.js 提供了 `$set` 方法来动态地添加对象属性或数组元素并确保它们被正确地响应式更新。
`this.$set` 是 Vue.js 实例的一个方法,可用于在组件实例中添加响应式的属性或更新现有的属性。它接受三个参数:对象、属性名和属性值。例如,如果您要在组件实例中添加一个名为 `newProp` 的属性,则可以使用以下代码:
```javascript
this.$set(this.obj, 'newProp', 123)
```
其中,`this.obj` 是要添加属性的对象,`'newProp'` 是属性名,`123` 是属性值。
同样,如果您要在组件实例的数组中添加一个新的元素,则可以使用以下代码:
```javascript
this.$set(this.arr, 0, 'newElement')
```
其中,`this.arr` 是要添加元素的数组,`0` 是要插入元素的索引位置,`'newElement'` 是要添加的新元素。这样添加的元素也会被正确地响应式更新。
阅读全文