Как скрыть все кнопки, кроме нажатой одной, если они перечислены в v-for?

Question

У меня есть проектный маршрут, где я использовал v-карты, чтобы показать название проекта, ссылку на детали и кнопку, которая должна запустить проект.Когда я нажимаю кнопку, она отключается, и отображается другая, чтобы остановить ее.Проблема в том, что для отображения всех карт проектов, которые я использовал, v-for проходит через все проекты.Когда я нажимаю одну кнопку запуска, все отключаются (и это нормально), но я хочу, чтобы появлялась только одна кнопка остановки, а не все.Я могу получить идентификатор проекта, но не могу понять, как отключить все другие кнопки остановки проектов

  <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>

в сценарии:

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

Answer 1

Я думаю, что вы захотите сохранить все данные о ваших кнопках в массиве, вот краткий обзор того, что вы, вероятно, хотите сделать.

Я отредактировал фрагмент для отслеживания индексаа также отслеживать, какой проект, и buttonType активен.Общая концепция заключается в том, что вам нужно отслеживать, какой проект «активирован», и вам понадобится механизм для изменения того, какой проект активен.

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>