VueJS - How to highlight selected button when clicked

Question

I have 3 buttons that shows a chart when clicked on it respectively. Here below is the buttons for example:

Whenever the button is clicked respective chart is shown, but I want to keep the button highlighted with red color while the chart is shown.

<vs-button color="warning" @click="chartClick($event, 'chart1')" vs-value="chart1" v-model="show"> chart1</vs-button>

<vs-button color="warning" @click="chartClick($event, 'chart2')" vs-value="chart2" v-model="show"> chart2 </vs-button>

<vs-button color="warning" @click="chartClick($event, 'chart3')" vs-value="chart3" v-model="show"> chart3 </vs-button>

<script>
data () {
  return {
    show = false
  }
},
mounted (){
  chartClick (chart1)
},
methods: {
  chartClick (event, id){
    
    ...
    this.show = true
  }
}
</script>

Please help me in this, i want to know how to highlight the button, when the chart is shown.

And also i want to know how to display chart1 with button1 (chart1) highlighted when the page is loaded or runned at first.

tony19 · Accepted Answer · 2022-07-15 05:08:09Z

2

You can do that by adding one more variable in data section, for example:

data () {
  return {
    show : false,
    activeChart : '',
  }
}

You should not use variableName = defaultValue, it should be variableName : defaultValue.

and then add to your buttons:

:class="{activeChartClass: activeChart === 'chart1'}"

Note: are you sure v-model is supported on vs-button tag?

also you will have to add this to your chartClick method:

this.activeChart = id;

and finally add a CSS class to edit your active button:

.activeChartClass {
    background-color: red!important;
}

You can read more about class and style binding here: https://v2.vuejs.org/v2/guide/class-and-style.html#Object-Syntax

edited Jul 15, 2022 at 5:08

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 11, 2021 at 11:15

Mario Klisanic

6272 gold badges13 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Quantum Over a year ago

Thank you so much, don't know why it is not working, your logic seems correct to me. Like where exactly i should place the this.activeChart = id ??, i have placed it inside the method chartClick at the end .

Mario Klisanic Over a year ago

My bad, I have edited my answer now, I forgot to put : before class and that is necessary since we are calculating the expression there. So instead of class= it should be :class=

Quantum Over a year ago

No problem, i had used :class only, but too not working. So my question is where should the this.activeChart = id placed , i meant inside method only but should it be placed in the begining or in the end

Mario Klisanic Over a year ago

I have edited my answer again, take a look at it. Are you getting any errors now?

Mario Klisanic Over a year ago

Also, here is a sandbox where you can try it out how it works: codesandbox.io/s/jolly-ride-9sn98?file=/src/App.vue

|

Collectives™ on Stack Overflow

VueJS - How to highlight selected button when clicked

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related