How to hide all buttons except clicked one if they are listed in v-for?

Question

I have projects route where I used v-cards to show project name, link to details and button that should start project. When I click button it is disabled and another is shown-to stop it. Problem is that to show all projects cards I used v-for that goes through all projects. When I click on one start button, all are disabled (and that's ok), but I want only one stop button to appear, not all. I can get project id but I can't wrap my head around how to disable all others projects stop buttons

  <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="!isButtonActive"
          left
          small
          fab
          outline
          color="green"
          v-model="isButtonActive"
          @click="startStop(isButtonActive, project.id)">
          <v-icon>play_arrow</v-icon>
        </v-btn>
        <v-btn
          v-if="isButtonActive"
          small
          v-model="isButtonActive"
          @click="startStop(isButtonActive, 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>

in script:

startStop (isButtonActive, projectId) {
  console.log(projectId)
  this.isButtonActive = !isButtonActive
  // hideButtons(projectId)
}

Answer 1

I think you'll want to store all the data about your buttons in an array, here's a quick crack at what you may be looking to do.

I've edited the snippet to track the index and also track what project, and buttonType is active. The general concept is you need to track what project is 'activated', and you'll need a mechanism to change what project is active.

 data () { return { activeProject: 0, activeButton: 'start', projects: [ { name: 'one', active: true }, { name: 'two, active: false } ], buttons: [ { color: 'green', active: true, icon: 'play_arrow', type: 'start' }, { color: 'blue', active: false, type: 'stop' } ] } }, methods: { startStop (projectId) { this.buttons.forEach((button) => { if (button.type !== activeButton) { button.active = true } else { button.active = false } }) }, activateProject (index) { this.activeProject = index } } 

 <v-flex v-for="(project, index) in projects" :key="project.id" xs4> <v-card> <v-card-title> <span class="headline">{{ project.name }}</span> <v-spacer></v-spacer> <v-btn v-for="button in buttons" v-if="button.active && activeProject === index" :color="button.color" v-model="button.active" @click="startStop()"> <v-icon v-if="button.type === 'start'">play_arrow</v-icon> <stopwatch v-else /> </v-btn> </v-card-title>