this.$set怎么用
时间: 2023-10-06 21:09:33 浏览: 65
this.$set 是 Vue.js 提供的一个实例方法,用于更新 Vue 实例中的响应式数据。它的用法如下:
```
this.$set(object, key, value)
```
其中,`object` 是需要更新的对象,`key` 是需要更新的属性名,`value` 是需要更新的属性值。
举个例子,在 Vue 实例中,如果我们要更新一个数组中的某个元素,我们可以使用 `this.$set` 方法来更新:
```
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item }}
<button @click="updateItem(index)">Update</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: ['A', 'B', 'C']
}
},
methods: {
updateItem(index) {
this.$set(this.items, index, 'D')
}
}
}
</script>
```
在上面的例子中,当用户点击 `Update` 按钮时,`updateItem` 方法会调用 `this.$set` 方法来更新 `items` 数组中的元素。这样更新后,Vue 实例会自动重新渲染界面,显示最新的数据。
阅读全文