Vue中v-for循环列表点击按钮后仅显示当前项目停止按钮问题

这个问题我太熟了！你现在的核心问题是用了全局的单个状态变量isButtonActive，所有循环出来的卡片都绑定这个变量，所以只要它一变，所有按钮的状态都会跟着切换。咱们只需要把状态改成每个项目单独维护，就能实现点击哪个项目，就只切换那个项目的按钮啦。

具体修改步骤 #

1. 把全局状态改成项目级状态 #

把原来的单个isButtonActive变量，换成一个对象（或者Map），用来存储每个项目的激活状态。比如在data里定义：

data() {
  return {
    // 用对象存储，键是projectId，值是布尔值（是否处于激活状态）
    activeProjects: {}
  }
}

2. 修改模板中的按钮判断条件 #

原来的v-if="!isButtonActive"要改成根据当前项目的id，去activeProjects里找对应的状态。如果项目id不在对象里，默认是未激活（false）：

<v-flex v-for="project in projects" :key="project.id" xs4>
 <v-card>
  <v-card-title>
   <span class="headline">{{ project.name }}</span>
   <v-spacer></v-spacer>
   <!-- 未激活时显示启动按钮 -->
   <v-btn 
    v-if="!activeProjects[project.id]" 
    left small fab outline color="green" 
    @click="startStop(project.id)"
   >
    <v-icon>play_arrow</v-icon>
   </v-btn>
   <!-- 激活时显示停止按钮 -->
   <v-btn 
    v-if="activeProjects[project.id]" 
    small 
    @click="startStop(project.id)"
   >
    <stopwatch />
   </v-btn>
  </v-card-title>
  <v-card-actions>
   <v-btn small flat @click="goTo({ name: 'project', params: { projectId: project.id } })">
    Project details
   </v-btn>
  </v-card-actions>
 </v-card>
</v-flex>

这里我去掉了没用的v-model（按钮不需要v-model，用点击事件切换状态就行），直接根据activeProjects[project.id]的布尔值来控制显示。

3. 修改startStop方法 #

现在方法只需要接收项目id，然后切换这个id对应的状态即可：

startStop (projectId) {
  console.log(projectId)
  // 切换对应项目的激活状态，如果没定义过就默认设为true
  this.activeProjects[projectId] = !this.activeProjects[projectId]
}

额外优化小技巧 #

如果希望页面加载时所有项目都是未激活状态，也可以在获取到projects数据后，初始化activeProjects：

// 假设你是在某个钩子或者接口请求里拿到projects数据
async fetchProjects() {
  const projects = await yourApiCall()
  this.projects = projects
  // 初始化所有项目为未激活
  projects.forEach(project => {
    this.activeProjects[project.id] = false
  })
}

这样修改后，点击某个项目的启动按钮，就只会切换该项目的按钮状态，其他项目完全不受影响啦～

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