# Dynamically change class of a button in template node

**URL:** <https://discourse.nodered.org/t/dynamically-change-class-of-a-button-in-template-node/98482>\
**Category:** Dashboard\
**Tags:** dashboard-2, ui-template\
**Created:** [3 August 2025 16:02 UTC](https://discourse.nodered.org/t/dynamically-change-class-of-a-button-in-template-node/98482 "2025-08-03T16:02:17Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [3 August 2025 16:02 UTC](https://discourse.nodered.org/t/dynamically-change-class-of-a-button-in-template-node/98482/1 "2025-08-03T16:02:17Z")

</div>

```auto
<template> 
    <Teleport v-if="mounted" to="#app-bar-title">
        
        <div width = "auto" class="btn-group">
        <v-btn class='button1' @click="send({payload:'b2'})">Machines</v-btn>
        <v-btn class='button1' @click="send({payload:'b3'})">Analysis</v-btn>
        <v-btn class={{msg.class}} @click="send({payload:'b4'})">Online_DT</v-btn>
        <v-btn class='button1' @click="send({payload:'b5'})">Offline_DT</v-btn>
        <img src="/dlogo-copy.png" width = '70px' style="vertical-align:middle" alt="DM" >       
 </div>
    </Teleport>
</template>
<script>
    export default {
        data() {
            return {
                mounted: false
            }
        },
        mounted() {
            this.mounted = true
        }
    }
</script>

```

I have this code in a template node and am able to succesfully put few buttons in the header using teleport, so that they appear in all pages of dashboard.  
i want to dynamically change the class of a particular button depending on what page i am in. (to show that button was pressed last), i am not able to use mustache template, how do i achieve this ?

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [3 August 2025 16:17 UTC](https://discourse.nodered.org/t/dynamically-change-class-of-a-button-in-template-node/98482/2 "2025-08-03T16:17:23Z")

</div>

amazing! gemini.google was able to correct my code SUCCESSFULLY. it understands Node-Red!

_the {{msg.class}} syntax won't work inside a Vue.js block. The ui-template node processes Mustache templates ({{...}}) before the Vue component is initialized. Vue has its own templating system, and it's what you should use for dynamic class binding._

_Correcting the Dynamic Class_  
_To dynamically bind a class in Vue, you should use the :class directive (which is a shorthand for v-bind:class). You can pass the msg.class property directly to it._

_Here is the corrected line of code:_

```auto

<v-btn class='button1' @click="send({payload:'b3'})">Analysis</v-btn>
<v-btn :class="msg.class" @click="send({payload:'b4'})">Online_DT</v-btn>
<v-btn class='button1' @click="send({payload:'b5'})">Offline_DT</v-btn>

```

_By using :class="msg.class", you're telling Vue to bind the class attribute of the button to the value of the class property on the msg object, which is passed to the component from your Node-RED flow._

I am really amazed with AI...

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [17 August 2025 16:17 UTC](https://discourse.nodered.org/t/dynamically-change-class-of-a-button-in-template-node/98482/3 "2025-08-17T16:17:55Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.