数据定义标识-$set

117 阅读1分钟

添加的动态属性,不具备响应式特点,这个时候你必须要使用这个属性还必须是响应式的,就可以使用 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)