WoJ WoJ - 1 month ago 15
Javascript Question

How to use a variable in the parameters of an element?

I use the following code to create a few

<div>
elements in a
v-for
loop:

<div class="row" v-for="sentinel in sentinels">
<div class="cell date">{{ sentinel.when }}</div>
<div class="cell city">{{ sentinel.city }}</div>
</div>


It works perfectly.

I now wanted to extend this with an
<img>
element:

<div class="row" v-for="sentinel in sentinels">
<div class="cell date">{{ sentinel.when }}</div>
<div class="cell city">{{ sentinel.city }}</div>
<div class="cell country"><img src={{ sentinel.flagURL }} title={{ sentinel.country }}</img></div>
</div>


This fails with a
Uncaught Error: Error parsing template:(…)
error in the console.

sentinel.flagURL
and
sentinel.country
has the correct (expected) value when checking with the debugger.

Is it possible to use the variables (
{{ sentinel.whatever }}
for the case above) not only between opening and closing tags but also for the parameters of the tag?

Med Med
Answer

Simply bind your element without mustaches:

<div class="cell country"><img :src="sentinel.flagURL" :title="sentinel.country"></div>

Image tag in HTML:

<img src="">