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

sanitizing user input in an AngularJS application

Dealing with useEffect being invoked twice within strictMode for processes that should only execute once

Issues with routeparams are preventing ng-repeat from functioning properly, without any response or resolution

jqgrid's date restriction is set to November 30th, 1999 at midnight

Issue with the positioning of the datepicker is not functioning properly

Elegant rounded bordered sidebar design to highlight selected navigation items using HTML and CSS

Extracting and retrieving information from a complex data structure obtained through an API call

The framework for structuring web applications using Javascript programming

What could be the reason my mat-form-field is not displaying the label?

Using javascript to store HTML tags in a variable

Removing custom scrollbars using jQuery from an element

The display function in Javascript has a tendency to work sporadically

The concept of sharing states between components in Vuejs

Switching Over to Burger Menu

Tips for incorporating a Font Awesome icon <i> within a select dropdown and customizing its appearance

Encountering CORS issue despite employing a CORS library

Creating a unique carousel design using only CSS in Bootstrap

Enhance your web forms with jQuery Chosen's automatic formatting feature

What is the most efficient way to save a document in mongoose based on a specific user's

initiating AngularJS ng-model pipeline on blur event