How to dynamically change the color of a button in a list in Vue.js when it is clicked

Question

How to dynamically change the color of a button in a list in Vue.js when it is clicked

I am working on a dynamic list of buttons that are populated using an array of objects:

          <div
            class="form-inline"
            v-for="(genre, index) in genreArray"
            :key="index"
          >
            <button class="btn m-1" type="button" @click="genreButton(genre, index)" 
                :class="[
                  { 'clicked': clicked}
                ]"
            >
              {{ genre.name }}
            </button>
          </div>

The format of the array is as follows:

genreButton=[{
  id='1234'
  name='buttonOne'
},
//and many more objects with same key and different values
]

I am attempting to change the color of only the button that is clicked by adding a specific class to it:

data(){
  return {
    clicked: false  
  }
},
methods:{
  genreButton(genre, index){
    this.clicked = !this.clicked
  }
}

Here is the CSS I am using for changing the color:

.clicked{
  background-color= red;
}

However, I am facing an issue where all buttons change color when one is clicked. How can I ensure that ONLY the clicked button changes color?

javascript html css vue.js object

Answer 1

Answer №1

Within this context, the clicked property exists at the component level and is shared among all buttons nested within.

An alternative approach would involve assigning a unique clicked property to each button in the genreButton array:

genreButton=[
  {
    id:'1234'
    name:'buttonOne'
    clicked: false,
  },
  //...
]

Yet, a more refined solution could entail creating a dedicated button component with an internal clicked property.

<template>
  <button 
    class="btn m-1" 
    type="button" 
    @click="clicked = !clicked" 
    :class="[ { 'clicked': clicked} ]" >
    {{ genre.name }}
  </button>
</template>

<script>
export default {
  name: 'CustomButton',
  props: {
    genre: Object,
  },
  data: () => ({
    clicked: false,
  })
}
</script>

<style scoped>
.clicked{
  background-color= red;
}
</style>

You can then utilize the button component like this:

<div
  class="form-inline"
  v-for="(genre, index) in genreArray"
  :key="index" >
  <CustomButton :genre="genre" />
  
</div>

Answer 2

Within this context, the clicked property exists at the component level and is shared among all buttons nested within.

An alternative approach would involve assigning a unique clicked property to each button in the genreButton array:

genreButton=[
  {
    id:'1234'
    name:'buttonOne'
    clicked: false,
  },
  //...
]

Yet, a more refined solution could entail creating a dedicated button component with an internal clicked property.

<template>
  <button 
    class="btn m-1" 
    type="button" 
    @click="clicked = !clicked" 
    :class="[ { 'clicked': clicked} ]" >
    {{ genre.name }}
  </button>
</template>

<script>
export default {
  name: 'CustomButton',
  props: {
    genre: Object,
  },
  data: () => ({
    clicked: false,
  })
}
</script>

<style scoped>
.clicked{
  background-color= red;
}
</style>

You can then utilize the button component like this:

<div
  class="form-inline"
  v-for="(genre, index) in genreArray"
  :key="index" >
  <CustomButton :genre="genre" />
  
</div>

How to dynamically change the color of a button in a list in Vue.js when it is clicked

Answer №1

Similar questions

What steps can I take to make sure my JavaScript code accurately calculates numbers without resulting in undefined or NaN values?

foreverjs neglects to log the child process's console.log output to any log files

Can all date fields with identical dates be updated simultaneously?

Prolong the duration before the submenu closes on a div-based css menu

Changing the color of an element on click using jQuery's .css() method,

Unable to retrieve obj after using $location.url

Transforming the appearance of the menu element in Vue using transitions

Struggling to locate the correct path for the CSS file in Express and Handlebars

Sending JSON data back to the server using KeyValuePair in C#

Modify the image inside a div when hovering

Is today within the current week? Utilizing Moment JS for time tracking

Developing a Single Page Application using Express

Blazor: Passing a CSS class as a parameter to a child component

The <mat-radio-button> component does not have a value accessor specified

Obtaining the value of a command argument with JavaScript in ASP.NET

Code in jQuery or JavaScript to retrieve precise node information for the currently selected form field, text, or image on a webpage

Having trouble decoding audio data in JavaScript Web Audio?

What is the best method for inserting the HTML content from a specific div into a textarea?

Is it possible to maintain a fixed footer while utilizing async/ajax functions?

What is the process for logging in or authenticating before running tests with pa11y-ci?