Dynamically change class of a button in template node

Dashboard
,
1 
<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 ?

2

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:


<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...