如果它们在 v-for 中列出，如何隐藏除单击按钮之外的所有按钮？

Question

我有项目路线，我使用 v-cards 显示项目名称，link 显示详细信息和应该启动项目的按钮。当我单击按钮时，它被禁用并显示另一个按钮以停止它。问题是要显示我使用 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 处于活动状态。一般概念是您需要跟踪项目是什么 'activated'，并且您需要一种机制来更改活动项目。

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>

如果它们在 v-for 中列出，如何隐藏除单击按钮之外的所有按钮？

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

javascript

vue.js

v-for

vuetify.js