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.
