如何实现列表项message非空时，将同项showCheckMark设为true？现有方法无效

我有一个包含多组属性的对象数组，结构示例如下：

selectedFields() {
  return [
    {
      message: '',
      showCheckMark: false
    }
  ]
}

从数据库获取数据填充该数组后，部分项的message有值，部分为空字符串。需要实现：当某列表项的message非空时，将同一项的showCheckMark设为true，且每个列表项的处理相互独立，不会受其他项影响。

之前尝试的方法未生效：

checkForMessages(){
  this.selectedFields.forEach(selectedField => {
    if(selectedField.message){
      selectedField.showCheckMark = true
    }
  })
}

替代实现方式 #

1. 使用map生成新数组（推荐） #

如果selectedFields是响应式数据（比如Vue的计算属性/ref），直接修改原对象可能无法触发响应。用map生成新数组，每个项的showCheckMark仅由自身message决定：

updateCheckMarks() {
  this.selectedFields = this.selectedFields.map(item => ({
    ...item,
    // 加trim避免空格被误判为有效内容
    showCheckMark: item.message.trim() !== ''
  }))
}

2. 修复原forEach方法的潜在问题 #

原方法失效可能是因为selectedFields是只读的（比如计算属性），或者message存在空格类的无效值。调整后：

checkForMessages(){
  // 先复制数组确保可修改
  const editableFields = [...this.selectedFields]
  editableFields.forEach(field => {
    // 严格判断非空
    field.showCheckMark = field.message !== '' && field.message.trim() !== ''
  })
  this.selectedFields = editableFields
}

3. 填充数据时直接处理 #

在从数据库取数填充数组的阶段就完成设置，省去后续遍历步骤：

// 假设dbData是从数据库获取的原始数据
this.selectedFields = dbData.map(item => ({
  message: item.message || '',
  showCheckMark: item.message && item.message.trim() !== ''
}))

内容的提问来源于stack exchange，提问作者Cphml444