# Basic Template migration

**URL:** https://discourse.nodered.org/t/basic-template-migration/85790
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [23 February 2024 03:21 UTC](https://discourse.nodered.org/t/basic-template-migration/85790 "2024-02-23T03:21:32Z")
**Posts on this page:** 1
**Showing post:** 8

<div class="post-metadata">

### Author: ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [23 February 2024 09:04 UTC](https://discourse.nodered.org/t/basic-template-migration/85790/8 "2024-02-23T09:04:26Z")

</div>

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:

```html
<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:

```html
<template>
    <img :src="`${msg.payload?.icon}.png`" alt="img-alt">    
</template>

```

Where here, it would auto-append `.png` to anything read from `.icon`

---

_[View the full topic](https://discourse.nodered.org/t/basic-template-migration/85790)._