template_d1.json (1.1 KB)
I want to migrate below DB1 template to DB2, but somehow unable to handle the msg.payload
The msg.payload value is "//cdn.weatherapi.com/weather/64x64/day/113.png" to show an icon
How can I do this with Db2 ?
Place the img tag inside template tag
<template>
<img src="image-source" alt="img-alt">
</template>
@hotNipi I have managed the hard-coded part already, but as soon I i replace the hardcoded src="image-source" with the variable (e.g. src="{{msg.payload.icon}}") than the template is failing.
the msg.payload.icon has a valid load " //cdn.weatherapi.com/weather/64x64/day/113.png" but it is on;y showing when hardcoded and not provided from outside the template
<template>
<img :src="`${msg.payload.icon}`" alt="img-alt">
</template>
2 Likes
wow... it works!
where can I read about these new teamplate structures & formats? ...e.g. "${msg.payload.icon}"
The dollar thing is not directly related to vue nor the ui_template but it is template literal
Why it is working and every other (I'm sure you tried hard) failed - I'm not on position to explain it in vue terms but as it is dynamic property value it's an expression. Using template literals for expressions is common way to solve that kind of problems.
yeah .. looks like I have to do a lot of freshen-up to do .. before I can migrate all my DB1 dashboards to DB2 
thx a lot for your great and quick help
In Vue-land, no need to have {{ }} when it's inside an attribute. Instead, you can preced the attribute with a : to tell Vue "there is code in here, go run it".
So another way to write this, which is a little more Vue would be:
<template>
<img :src="msg.payload?.icon" alt="img-alt">
</template>
Note I also included ? on the .payload as it then handles the case where msg.payload doesn't yet exist, by checking it exists before trying to read .icon (generally on first load)
The ${} syntax used by @hotNipi is a general JavaScript notation, and can be used, for example, if you want to merge strings with a dynamic variable:
<template>
<img :src="`${msg.payload?.icon}.png`" alt="img-alt">
</template>
Where here, it would auto-append .png to anything read from .icon
2 Likes
That explanation should be written in docs with red & bold & xxx-large. 
1 Like
.? won't work on old browsers though so make sure you aren't using it if you use old tablets or phones around the house as displays.
The one should know the target as always ...
I try to strike a balance between JavaScript features and supporting older browsers.
All my front-end code is, these days, targeted at browsers from early 2019 onwards. While perhaps not relevant to D2 use, I use ESBUILD to ensure that I can enforce that target as well as to produce parallel non-module (IIFE) and module (ESM) versions of front-end code.
JavaScript is in massive flux (as is CSS) unfortunately so some caution about what features should be used is needed.
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
