Vue Composition API中如何实现reactive对象仅单个属性为true其余为false

实现方案 #

方案1：兼容原有数据结构的通用切换函数 #

无需修改你已经定义的sections响应式对象，只需要封装一个统一的处理函数即可：

const activateSection = (activeKey) => {
  // 遍历所有section属性，匹配的设为true，其余设为false
  Object.keys(sections).forEach(key => {
    sections[key] = key === activeKey
  })
  // 此处可写通用关联操作，不同section有专属操作可补充判断逻辑
  // 示例：if (activeKey === 'section1') { 执行section1专属逻辑 }
}

按钮绑定事件时直接传入对应section的属性名即可，比如：
@click="activateSection('section1')"、@click="activateSection('section2')"，不需要再单独编写每个section的处理函数。

方案2：优化数据结构（更推荐，性能更好） #

如果你的业务场景是同一时间永远只有一个section显示，可以直接修改响应式数据的定义，省去遍历对象的开销：

// 替换原有sections对象，直接存储当前激活的section标识
const activeSection = ref('section1')

元素显隐判断逻辑对应修改为：v-if="activeSection === 'section1'"，切换函数简化为：

const activateSection = (key) => {
  activeSection.value = key
  // 关联操作逻辑同上
}

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