添加的动态属性,不具备响应式特点,这个时候你必须要使用这个属性还必须是响应式的,就可以使用 this.$set 来解决。
$set 可以针对目标对象,来添加属性,且是响应式的
语法:
this.$set(目标对象, 属性名称, 初始值)
// 针对每一行数据添加一个编辑标记
this.list.forEach(item => {
// item.isEdit = false // 添加一个属性 初始值为false
this.$set(item, 'isEdit', false)
})
数据响应式,来添加对象
// 添加式对象
this.$set(item, 'editRow', {
name: item.name,
state: item.state,
description: item.description
})
$set 是 Vue.js 框架中用于更新组件数据的方法之一。它用于在响应式对象中设置一个属性的值,并触发视图更新。
具体来说,$set 方法接收三个参数:要设置属性值的对象、属性名称以及属性值。如果该属性已经存在,则会更新其值并通知相关组件重新渲染视图;否则将创建新属性并触发相应的视图更新。
在实际中的应用方法
// 用 v-model 来做响应式
<el-input v-if="row.isEdit" v-model="row.editRow.description" type="textaroa" />
=======================================
// 在发请求时,直接调用
await updateRole(row.editRow)