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

by

0👍

✅

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>

Leave a comment