如果在v-for中列出了除單擊的按鈕之外的所有按鈕，如何隱藏它們？

Question

我在項目路線中使用v卡顯示項目名稱，指向詳細信息的鏈接以及應該啟動項目的按鈕。 當我單擊按鈕時，它被禁用，並顯示另一個-停止它。 問題在於要顯示我使用v-for的所有項目卡片，該卡片遍及所有項目。 當我單擊一個開始按鈕時，所有按鈕都被禁用（沒關系），但是我只希望出現一個停止按鈕，而不是全部。 我可以獲取項目ID，但是無法解決如何禁用所有其他項目的停止按鈕的問題

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