HTML in ui-template via message?

Dashboard
1

If I have the following in a ui-template...

<template>
    <div>
        <p>{{ msg.log }}</p>
    </div>
</template>

and msg.log = "1<br>2<br>3"

I get...

1<br>2<br>3

via the template view in dashboard, not...

1
2
3

Is there some (new) trick in dashboard 2.0 to get HTML in message to be seen as HTML? I tried msg.log = "1\n\r2\n\r3" but was not surprised that, that did not work.

2

OK... this is not exactly what I asked but it works, to insert new lines into payload string(s).

Template...

<template>
    <div>
        <span class='log-output'> {{msg.payload}} </span>
    </div>
</template>
<script>
    export default {
        // Must Exist For Template To Work
    }
</script>
<style>
    .log-output {
        white-space: pre;
    }
</style>

So apparently under dashboard 2.0, new line will be recognized via the style above. Using an array of strings, or a ring buffer of message payloads, say time stamps, join them using javascript new line, i.e. '\n\r', as delimiter via join.

msg.payload = msg.payload.join('\n\r')

The results...

image
image954×401 4 KB

3

Same thing happens when you try to display other HTML-formatted text, like a bulleted list. This is because the Vue framework sets its own CSS on top of the default raw HTML styling.
One way to solve this is what you did (override with your own style). Another option is to use the built-in Vuetify directive v-html