Vue.js展开/收起功能异常：点击切换按钮所有Worker内容同步展开

嘿，我一眼就看出问题所在啦！你现在用的是全局的showSection变量来控制所有Worker的展开/收起状态——这就相当于所有Worker共用同一个开关，点击按钮当然会全体同步切换状态啦！

下面是具体的修复步骤，一步步来：

1. 给每个Worker添加独立的展开状态 #

删掉全局的showSection，改成给每个Worker对象绑定自己的isExpanded状态（默认设为false，也就是初始收起）。如果是从接口获取的Worker数据，拿到数据后遍历添加这个属性就行：

// 假设你是从接口拉取workers数据
fetchWorkers().then(fetchedWorkers => {
  this.workers = fetchedWorkers.map(worker => ({
    ...worker,
    isExpanded: false // 给每个worker加独立的展开状态
  }))
})

2. 修改模板，绑定每个Worker的独立状态 #

首先要确保你是先循环workers，再处理每个Worker的内容（原来的模板结构有点混乱，要调整层级），然后把展开/收起的判断换成当前Worker的isExpanded：

<!-- 先循环每个Worker，注意加唯一key -->
<div v-for="worker in workers" :key="worker.id" class="worker-item">
  <ul>
    <!-- 简洁写法：根据展开状态显示全部或前2条 -->
    <li v-for="item in worker.services.slice(0, worker.isExpanded ? worker.services.length : 2)" :key="item">
      {{ item }}
    </li>
    <!-- 也可以分开写（避免重复显示前2条）：
    <li v-for="item in worker.services.slice(0, 2)" :key="item">{{ item }}</li>
    <div class="body" v-show="worker.isExpanded">
      <li v-for="item in worker.services.slice(2)" :key="item">{{ item }}</li>
    </div> -->
  </ul>
  <!-- 按钮文本和点击事件都绑定当前Worker的状态 -->
  <button @click="toggle(worker)">
    {{ worker.isExpanded ? 'Read Less' : 'Read More' }}
  </button>
</div>

3. 更新toggle方法，操作当前Worker的状态 #

把原来的toggle方法改成接收当前Worker参数，只切换这个Worker的isExpanded：

<script>
export default {
  data: () => ({
    workers: [] // 去掉全局的showSection变量
  }),
  methods: {
    toggle(worker) {
      worker.isExpanded = !worker.isExpanded
    }
  }
}
</script>

这样修改后，每个Worker都有自己独立的展开/收起开关，点击某个Worker的按钮就只会影响它自己的内容啦！

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