Vue.js对象属性变更后UI未更新问题求助

1. 修正toggleShow方法的对象引用错误 #

你当前的toggleShow方法错误地修改了组件data里的this.target（表单绑定的临时对象），而非点击对应的列表项target对象。这是控制台日志变更但UI未同步的核心原因——你修改的根本不是页面上显示的那个target的show属性。

修改toggleShow方法：

toggleShow(target) {
  // 直接修改传入的目标对象的show属性，而非this.target
  target.show = !Boolean(target.show);
  console.log(target.show);
}

2. 确保show属性具备响应式 #

Vue 2无法检测对象新增的属性，如果target对象创建时未初始化show属性，后续修改不会触发UI更新。

修复新target创建逻辑 #

在saveTarget方法的创建分支中，给新target添加show初始值：

// create分支
this.target.id = Math.random().toString(26).slice(2);
this.target.show = false; // 初始化show属性，确保响应式
this.targets.push(this.target);

处理已有旧数据（可选） #

如果targets数组中存在未包含show属性的旧数据，可在组件挂载时补全：

async mounted() {
  this.targets = this.targets.map(t => ({
    ...t,
    show: t.show !== undefined ? t.show : false
  }));
}

3. 额外优化：遵循不可变数据原则（可选） #

若想避免直接修改原对象，可通过替换数组元素的方式触发响应式更新：

toggleShow(target) {
  const updatedShow = !Boolean(target.show);
  const index = this.targets.findIndex(t => t.id === target.id);
  if (index !== -1) {
    this.targets.splice(index, 1, {
      ...target,
      show: updatedShow
    });
  }
}

完成以上修改后，页面中的{{ target.show }}与展开/收起逻辑即可正常同步更新。

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