CODEWITHSUNDEEP
javascriptvue.jsbuttoncolors
Aras121
Aras121

Reputation: 91

How to change button color if button active or selected using Vue js

I want to change button color if the button is active or selected.

This is my code:

template

<template>
  <div id="app">
    <div>
      <button
        class="btn btn-primary mb-3"
        @click="btnBlue()"
      >
        Blue
      </button>
      <button
        class="btn btn-warning text-white mx-3 mb-3"
        @click="btnYellow()"
      >
       Yellow
      </button>
    </div>
    <div>
      <span
        class="btn-map"
        v-for="(item, index) in new Array(data.length)"
        :key="index"
      >
        <button
          class="btn btn-outline-primary"
          :class="{ active: index + 1 === activeButton }"
          :style="{ 'background-color': color}"
          @click="setActive(index)"
        >
          {{ index + 1 }}
        </button>
      </span>
    </div>
  </div>
</template>

Script

<script>
export default {
  name: 'App',
  data() {
    return {
      data: [ 1, 2, 3, 4, 5],
      color: "",
      activeButton: 0
    }
  },
  methods: {
    setActive(index) {
      this.activeButton = index + 1;
    },
    btnBlue() {
      this.color = '#039BE5';
    },
    btnYellow() {
      this.color = '#f3b808';
    }
  }
}
</script>

This is the : demo link

I want to change the button color if I click the blue button, I want only the selected active button color is changing to blue not all button. If I click the yellow button I want only the selected active button color is changing to yellow not all button dan if no button selected then button blue or yellow clicked, I want no color changed. So the color only change on selected or active button and color not changing if no button selected or active.

Please help me to change the color button only on selected active button. Thanks.

Upvotes: 1

Views: 3539

Answers (1)

wittgenstein
wittgenstein

Reputation: 4472

did you mean something like that?

Vue.createApp({
  data() {
    return {
      data: [ 1, 2, 3, 4, 5],
      color: "",
      activeButton: 0
    }
  },
  methods: {
    setActive(index) {
      this.activeButton = index + 1;
    },
    btnBlue() {
      this.color = '#039BE5';
    },
    btnYellow() {
      this.color = '#f3b808';
    }
  }
}).mount('#demo')
<script src="https://unpkg.com/vue@next"></script>

<div id="demo">
    <div>
      <button
        class="btn btn-primary mb-3"
        @click="btnBlue()"
      >
        Blue
      </button>
      <button
        class="btn btn-warning text-white mx-3 mb-3"
        @click="btnYellow()"
      >
       Yellow
      </button>
    </div>
    <div>
      <span
        class="btn-map"
        v-for="(item, index) in new Array(data.length)"
        :key="index"
      >
        <button
          class="btn btn-outline-primary"
          :style="{'background-color': activeButton === index + 1 ? color : ''}"
          @click="setActive(index)"
        >
          {{ index + 1 }}
        </button>
      </span>
    </div>
</div>

I just added a condition into your v-for:

:style="{'background-color': activeButton === index + 1 ? color : ''}"

so if the button with the index+1 matches the activeButton the variable color will be used, else no color will be applied.

Upvotes: 2

Related Questions