How to define local variables in Vue3's template files

There are situations when you'd like to use local variables in the likes of [Java's Thymeleaf](https://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#local-variable), for example. 

```js
<li v-if="setting" :key="setting.id" :with="chart = fromSetting(setting)">
  {{ chart.name }}
</li>
```


P.S. This solution only works with template rendering to display data. Passing it to events won't work since it will always pass the latest evaluated value from the loop.

Nick Ciolpan
19 Sep 2021
« Back to post