2👍
✅
According to Vue.JS’ documentation von v-for
:
you can also use v-for to iterate through the properties of an object
and:
You can also provide a second argument for the key
The example they provide is as follows:
<div v-for="(value, key) in object">
{{ key }}: {{ value }}
</div>
To use such a variable like value
or key
in v-bind
(or using the short-hand syntax :
), define it like a function returning the final string.
So, for your example, it should work like this:
<v-layout row v-for="r in ranks" :key="r.id">
<v-flex xs2 v-for="(n, nKey) in r" :key="n">
<img :src="'/static/img/' + nKey + '.png'" />
[...]
Source:stackexchange.com