Basic Template migration

Dashboard
8

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